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

【问题标题】：How can I change the selected v-select item using a method?如何使用方法更改选定的 v-select 项目？
【发布时间】：2019-07-02 14:53:47
【问题描述】：

我正在尝试在脚本部分的方法中设置我的 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 }

但没有任何效果。

【问题讨论】：

您需要在加载或@change 时使用它吗？
在单个文件组件中，您需要将数据定义为您拥有的函数，并返回没有的数据。 data: function(){ return{items:[...]} } 还是您在输入代码时出错了？
@skribe 抱歉，这只是一个错字，我确实有退货声明
你不需要一些函数来做，只要写好 -> selected: { name: 'item 1', value: 1 } 而不是 selected: { name: 'iteam 1', value: 1 }

标签： javascript vue.js methods vuetify.js v-select

【解决方案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 调用，以首先在字段中显示它然后你会更新。但是在更新之前，你需要在你的 vuejs 的编辑方法中做一些事情，因为你已经为那个特定的 id 加载了数据。

现在假设您已根据特定 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()，这是因为当您在控制台中签入时，主键是一个整数，如 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 )
     }
  });
}

【讨论】：

【解决方案2】：

这是一个完整的例子：

new Vue({
  el: '#app',

  data () {
    const items = [
      { name: 'item 1', value: 1 },
      { name: 'item 2', value: 2 },
      { name: 'item 3', value: 3 }
    ]

    return {
      items,
      selected: items[1]
    }
  },
  
  methods: {
    apply (component) {
       this.selected = this.items.find(item => item.name === component.item)
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-flex xs4>
      <v-btn
        v-for="item in items"
        :key="item.value"
        @click="apply({item: item.name})"
      >
        {{ item.name }}
      </v-btn>
      <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>
  </v-app>
</div>

在您的原始代码中，apply 方法似乎期望传递一个对象 (component)，该对象具有与其中一项的 name 匹配的 item 属性。我试图保留这种行为，但不清楚你为什么想要这样做。通常，item-value 使用的值将是幕后使用的底层 id 值，而不是 item-text。

我没有尝试在对象之间复制值，而是将 items 中的 3 个值视为规范值，并确保 selected 始终设置为这 3 个值之一。不仅是具有相同值的对象，而且实际上这些对象之一。这不是严格要求的，但对我来说这似乎是最简单的方法。

【讨论】：

【解决方案3】：

你需要一次性设置selected，比如this.selected = { name: 'item 3', value: 3 }

我将申请测试的参数类型更改为字符串，但它应该类似于：

apply (component) {
    temp={}
    this.items.forEach((i)=> {
        if (i.name === component) {
            temp.name = i.name;
            temp.value = i.value;
        }
    });
    this.selected=temp
}

我用 btn 调用 apply

<v-btn v-for="n in 3" @click="apply(`item ${n}`)">Apply {{n}}</v-btn>

【讨论】：