CODEWITHSUNDEEP
typescriptvue.jsvuetify.jsnuxt.js
drunkdolphin
drunkdolphin

Reputation: 797

How to use v-select in Vuetify.js : 404 Not Found occurred

I have used Vuetify.js and Typescript. Now I have tried to understand to use Vuetify component using by Typescript. All components sample in Vuetify.js are written by Javascript. For beginner learner like me really confuse to use that. Now I have some issues in my code.

I just wanted to confirm v-select function and made code. but it didn't work and 404 not found error occurred. I checked console but no error. Does anyone advise me?

    <template>
  <v-container>
    <v-row align="center">
      <v-col class="d-flex" cols="12" sm="6">
        {{ selectedPlan}}
        <v-select
          v-model="selectedPlan"
          item-text="label"
          item-value="value"
          :items="plans"
          label="travel_plan"
          return-object
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Vue } from 'nuxt-property-decorator'

export default class extends Vue {
  selectedPlan = { label: 'germany', value: 'germany' }
  plans = [
    { label: 'germany', value: 'germany' },
    { label: 'spain', value: 'spain' },
    { label: 'france', value: 'france' }
  ]
}
</script>

Upvotes: 0

Views: 666

Answers (1)

milmal
milmal

Reputation: 551

Add '@nuxtjs/vuetify' to modules in nuxt.config.js

Here's a working solution with nuxt: https://codesandbox.io/s/vigilant-volhard-yiyje?file=/pages/index.vue

Edit: And adding <div data-app> <content /> </div> fixes the problem with the dropdown not showing due to data-app not found. See more here: Vuetify issue with v-menu

Upvotes: 1

Related Questions