v-select : cant show the seleted element

问题:

Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.

Here is my code

            <v-select
              prepend-icon="star_rate"
              :items="ratings"
              v-model="customer.rating"
              label="Rating"
              item-text="text"
              item-value="customer.rating"
              single-line
            ></v-select> 

Note: If I use {{customer.rating}} it gives an output like this

 { "id": 1, "text": "Bad" } 

and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.

Here is the complete code of my project file https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue

Thanks in advance

回答1:

I'm not sure what you mean by "... when Im click on Edit." but I will presume you mean when you click on the dropdown menu.

From what you have provided in your jsfiddle, your v-select should be like this:

<v-select
  prepend-icon="star_rate"
  :items="ratings"
  v-model="customer.rating"
  label="Rating"
  item-text="ratings.text"
  item-value="ratings"
  single-line
></v-select>

This can be found here, in the API props section.

item-text: Set property of items’s text value

item-value: Set property of items’s value

The text is what you see, I believe that text which is the current value of item-text is either undefined or not declared. If this answer doesn't work, then you need to provide more of your code.