CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
mrpuzzy2010
mrpuzzy2010

Reputation: 67

How to set default holder with v-select in Vuetify

im trying to set the placeholder for the v-select

<v-select
 item-value="id"
 item-text="name"
 :placeholder="holderValue"
 v-model="selectedDM"
 label="Chọn danh mục"
 :items="handleCate(item)"
 :disabled="status"   
>

I have tried to push a temp array but it still didnt work

    handleCate (item) {
      if ( this.radioGroup == "2") {
        //this.holderValue = null
        // let temp = []
        // console.log('im item ', item)
        // this.listCategory.map(category => {
        //   console.log('im cate ', category)
        //   temp.push({name: category.name, id: ""})
        //   //return category.name
        // })
        // console.log('im temp ', temp)
        // return temp
        return this.listCategory.map(category => {
          return category.name
        })
        
      }
    }

I have also tried to set like

this.holderValue = "Sth Sth"

But it still didnt work Any help would be very appreciated. Thanks for reading

Upvotes: 0

Views: 136

Answers (1)

Nilesh Patel
Nilesh Patel

Reputation: 3317

Let me know if this helps.

template

<v-select
  item-value="id"
  item-text="name"
  :placeholder="holderValue"
  v-model="selectedDM"
  :label="holderValue"
  :items="handleCate(item)"
  :disabled="status"   
/>

script

export default {
  data(){
    return {
      holderValue:'Sth Sth',
      selectedDM:'',
      listCategory:[{name:'Vue', id:1}, {name:'Angular',id: 2}, {name:'React',id:3}]
    }
  },
  async mounted(){
    // if fetching data from api
    // const data=await fetch('<api-url>').then(res=>res.json())
    // this.listCategory=data.map(d=>({name: d.name, id: d.id}))
  }
}

Upvotes: 1

Related Questions