nuxt.js 和 vue.js 如何使用 vuetify “选择”下拉列表

Question

我在我的表单中使用 nuxt.js 我有 vuetify “选择”下拉列表，但它没有显示下拉项目如何修复此错误。

<v-col class="d-flex" cols="12" sm="6" >
    <v-select :items="items" v-model.trim="form.city" label="Outlined style" outlined ></v-select>
</v-col>
<v-col cols="12" sm="12">

{{errors.GSTIN[0]}} {{errors.shop_front_image[0]}}

<script scoped>
  export default {
     
    data() {
      return {
        form: {
          city:'',
          GSTIN: '',
          shop_front_image:'',
        }
      }
    },
    methods: {
      handleFile() {
        let input = document.getElementById("file")
        console.log(input)
        this.form.shop_front_image = input.files[0]
       
      },
      async submit() {
    
        let formData = new FormData(); 
        
        formData.append('city', this.form.city)
        formData.append('GSTIN', this.form.GSTIN)
        formData.append('shop_front_image', this.form.shop_front_image)
     
        console.log(formData)
     
        let rsp = await this.$axios.$post('/Businessregister', formData, {
          headers: {
            'Content-Type':'multipart/form-data'
          }
        })
        console.log(rsp.response)
      }
   
      }
    }

</script>

<script>
  export default {
    data: () => ({
      items: ['Mumbai', 'Delhi', 'Bangalore'],
    }),
  }
</script>

Answer 1

将items从第二个脚本标签转移到第一个，并删除第二个script标签

<script>
  export default {
     
    data() {
      return {
        items: ['Mumbai', 'Delhi', 'Bangalore'],
        form: {
          city:'',
          GSTIN: '',
          shop_front_image:'',
        }
      }
    },
    methods: {
      handleFile() {
        let input = document.getElementById("file")
        console.log(input)
        this.form.shop_front_image = input.files[0]
       
      },
      async submit() {
    
        let formData = new FormData(); 
        
        formData.append('city', this.form.city)
        formData.append('GSTIN', this.form.GSTIN)
        formData.append('shop_front_image', this.form.shop_front_image)
     
        console.log(formData)
     
        let rsp = await this.$axios.$post('/Businessregister', formData, {
          headers: {
            'Content-Type':'multipart/form-data'
          }
        })
        console.log(rsp.response)
      }
   
      }
    }

</script>
<style scoped>

<style>

scoped 属性用于style 标签。