1

我在我的项目中使用 Vuetify。当我通过 v-select 插入一些数据时，它工作正常。同样，当我编辑也可以使用的数据时。唯一的问题是当我点击编辑时我看不到选定的元素。

这是我的代码

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

如果我选择一个不同的元素，它会在数据库上完全改变。所以一切都很好。唯一的要求是我想在单击编辑时将此值Bad显示为选定元素。

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

提前致谢

4

2 回答 2

1

这是一个老问题，但让我也发布我的答案以帮助其他人，经过大量搜索后，我已经到了这一点，我也想与其他人分享。

//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 的编辑方法中传递记录 ID，然后在 vuejs 的编辑方法中，你将对那个特定的记录执行一个编辑 axios 调用，首先在字段中显示它，然后你将更新。但是在更新之前，当您已经为该特定 ID 加载数据时，您需要在 vuejs 的编辑方法中做一些事情。

现在假设您已根据特定 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 这样的外键是字符串 ie "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 )
     }
  });
}
于 2020-07-08T07:55:50.557 回答
0

我不确定您所说的“...当我单击编辑时”是什么意思。但我想你的意思是当你点击下拉菜单时。

根据您在 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 道具部分。

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

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

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

于 2018-06-06T07:43:47.443 回答