javascript - 如何使用方法更改选定的 v-select 项？

Question

我正在尝试在脚本部分的方法中设置我的 v-select 组件的选定值。这些是代码部分:

    <v-flex xs4>
        <v-select v-model="selected" :items="items" item-text="name" 
        item-value="value" outlined class="ml-2 mr-1" return-object></v-select>
    </v-flex>

和脚本部分:

export default {
  return{
    data: function () {
        items: [
            { name: 'item 1', value: 1 },
            { name: 'item 2', value: 2 },
            { name: 'item 3', value: 3 }],
        selected: { name: 'iteam 1', value: 1 }
    },
    methods: {
        apply (component) {
            for (var i in this.items.entries()) {
                if (i.name === component.item) {
                    this.selected.name = i.name
                    this.selected.value = i.value
                }
            }
        }
    }
  }
}    

我试过不同的版本，比如

this.selected = i

this.selected[name] = i.name
this.selected[value] = i.value

this.selected = { i.name, i.value }

但没有任何效果。

Answer 1

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

//This will load all your items in dropdown
<v-select
   v-model="selected"
   :items="items"
   item-text="name"
   item-value="value"
   label="Select Item"
   dense>
</v-select>

现在编辑部分

假设您想编辑一条记录，因此您可能会在 vuejs 的编辑方法中传递记录 ID，然后在 vuejs 的编辑方法中，您将为该特定记录执行编辑 axios 调用以首先在字段中显示它然后你会更新。但是在更新之前，当您已经为该特定 id 加载数据时，您需要在 vuejs 的编辑方法中做一些事情。

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

假设您有 items 数组，其中包含下拉列表的全部数据。在这里面你有一个 value 和 name 字段。因此，在对特定记录进行编辑期间，您拥有此 items 数组和数据库中的对象。现在您可以使用以下代码了。

vuejs内部编辑方法

//item_id it is like a foreign key for dropdown you have in your table
this.selected = this.items.find(item => item.value === parseInt(res.data.item_id))
this.selected = parseInt(this.selected.item_id)

注意:我正在执行 parseInt() 这是因为当您在控制台中 checkin 时，主键是一个整数，如 1 但外键如 rating_id 是字符串，即 “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 )
     }
  });
}