Question

我在我的项目中使用Vuetify。当我通过v-插入一些数据时，选择其工作正常。当我编辑那些也有效的数据时。唯一的问题是当我点击编辑时我无法看到所选元素。

这是我的代码

            <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}}，则会提供这样的输出

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

如果我选择一个不同的元素，它在数据库上的完美变化。一切都很好。唯一的要求是，当我点击“编辑”时，我希望将此值错误显示为选定元素。

以下是我的项目文件https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue

的完整代码

提前致谢

Answer 1

我不确定你的意思＆＃34; ...当我点击编辑。＆＃34;但是当你点击下拉菜单时我会认为你的意思。

根据您在jsfiddle中提供的内容，您的v-select应该是这样的：

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

可以在API道具部分找到here。

item-text：设置项目文本值的属性

item-value：设置项目值的属性

正如您所看到的那样，我认为text是item-text的当前值未定义或未声明。如果这个答案不起作用，那么您需要提供更多代码。

Answer 2

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

//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方法内做些事情。

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

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

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（）但我没有检查过，也可以使用两个等于==。

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

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：cant显示seleted元素

2 个答案: