nuxt.js and vue.js how to use vuetify "Select " dropdown list

Question

i am using nuxt.js in my form i have vuetify "Select" Dropdown list but it not showing drop down item how to fix this error.

<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]}} <v-file-input v-model="form.shop_front_image" type="file" label="shop_front_image" outlined autocomplete="off" @change="handleFile()" id="file"> {{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>

You defined two script tags, we dont have scoped for script tag, scoped is for style tag — Mohsen
– Mohsen, Commented Oct 11, 2020 at 8:05
@Mohsen can you post your answer for batter understand thank you — user12380208
– user12380208, Commented Oct 11, 2020 at 8:06

Mohsen · Accepted Answer · 2020-10-11 08:08:57Z

1

Transfer items from second script tag to first, and remove second script tag

<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 attribute is for style tag.

answered Oct 11, 2020 at 8:08

Mohsen

4,2551 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user12380208 Over a year ago

scoped attribute is for style tag. Got it

user12380208 Over a year ago

i have 2 more Dropdown if i changed :items="items" to :drop1="drop1" and :drop2="drop2" its not showing dropdown item how to fix this

Mohsen Over a year ago

:items = "drop1" , items is prop name and drop1 is value assigned to it, same for second v-select :items = "drop2"

Collectives™ on Stack Overflow

nuxt.js and vue.js how to use vuetify "Select " dropdown list

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related