v-select:无法显示所选择的元素 [英] v-select : cant show the seleted element

问题描述

我在我的项目中使用Vuetify.当我通过v选择一些数据时，可以正常工作.此外，当我编辑该数据时也可以使用.唯一的问题是，当我单击编辑"时，我看不到选定的元素.

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.

这是我的代码

            <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> 

注意::如果我使用{{customer.rating}}，它将给出这样的输出

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.

这是我的项目文件的完整代码 https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue

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

预先感谢

推荐答案

这是个老问题，但让我也发表自己的回答以帮助其他人，经过大量搜索后，我到了这一点，我想与他人分享.

//This will load all your ratings in dropdown
<v-select
   v-model="customer.ratings"
   :items="ratings"
   item-text="text"
   item-value="id"
   label="Rating"
   dense>
</v-select>

现在编辑零件

让我们说您想编辑一条记录，因此您可能会在vuejs的edit方法中传递记录id，然后在vuejs的edit方法中传递，您将对特定记录进行edit axios调用，以首先在字段中显示它然后您将进行更新.但是在更新之前，如果您已经为该特定ID加载了数据，则需要在vuejs的edit方法内做些事情.

Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.

现在让我们说您已经根据特定的ID从数据库中收到一条记录，您将看到一个下拉ID，我的意思是说您在存储数据期间保存的一个下拉列表的外键.

Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.

假设您有一个ratings数组，该数组保存一个下拉列表的全部数据.在此内部，您有一个id和text字段.因此，在编辑特定记录时，您将拥有这个ratings数组和一个数据库中的对象.现在您可以使用下面的代码了.

Suppose you have ratings array which holds whole data for a dropdown. Inside this you are having an id and text fields. So you have this ratings array and an object from database during edit for a specific record. Now you are good to go with below code.

vuejs的内部编辑方法

this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_id)

注意:我正在执行parseInt()，这是因为当您在控制台中签入时，主键是一个像1这样的整数，但是外键(例如rating_id)是字符串i-e "1".如果您没有使用parseInt()但我没有检查过，也可以使用两个等于==.

Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.

为清楚理解，我只是分享了一个示例编辑代码，可能会对您有所帮助

editItem(id){
   axios.get( `/api/category/${id}` ).then( res => {
       if(res.data.status === 200){
         console.log(res.data.data)
         this.name = res.data.data.name
         this.id = res.data.data.id
         this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
         this.parent_id = parseInt(this.parent_id.id)
         this.edited = true
       }else{
         this.$toaster.error( res.data.message )
     }
  });
}

这篇关于v-select:无法显示所选择的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！