CODEWITHSUNDEEP
laravelvue.jsvuejs2nuxt.jsvuetify.js
user12380208
user12380208

Reputation: 531

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

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>

Upvotes: 1

Views: 2086

Answers (1)

Mohsen
Mohsen

Reputation: 4235

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.

Upvotes: 1

Related Questions