如何在 vue.js 2 中设置 v-select 中选择的选项值？答案

【问题标题】：How can I set option value selected in v-select in vue.js 2?如何在 vue.js 2 中设置 v-select 中选择的选项值？
【发布时间】：2019-07-01 15:45:13
【问题描述】：

我正在尝试设置optionselected，其中option 的值为1。但是在使用 vuejs 中的v-select 时遇到了麻烦。这就是我想要做的 -

<v-select name="branchid" v-model="branchid" 
         :options="branches.map(branches => ({label: branches.label, value: branches.value}))" 
         :selected="branches.value === 1"></v-select>

当option 的值为1 时，有人可以帮我获取option 的值selected 吗？

【问题讨论】：

标签： laravel vue.js jquery-select2 vue-select v-select

【解决方案1】：

我整理了一个简化版的（我认为）您正在尝试做的事情：

<template>
  <div>
    <div>
      <select v-on:change="select($event);" value="branchid">
        <option disabled value="">Please select one</option>
        <option :selected="branchid === 1">1</option>
        <option :selected="branchid === 2">2</option>
        <option :selected="branchid === 3">3</option>
      </select>
      <span>Selected: {{ branchid }}</span>
      <button v-on:click="selectOne">Select Option 1</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      branchid: 0,
      branchidTwo: 1
    };
  },
  methods: {
    select: function(evt) {
    this.branchid = evt.target.value;
  },
    selectOne: function() {
      this.branchid = 1;
    }
  }
};
</script>

这不使用 v-model 模式。文档明确指出，如果您使用 v-model，则该类本身将用作事实的来源，而不是值或被选中。您会看到我添加了一个按钮，用于在选择组件上设置选定选项。

希望对您有所帮助。

【讨论】：

另外，我需要搜索选项来选择option 值
你能更详细地解释一下你在这里想要达到的目标吗？ “搜索选项”是什么意思？
我有一个分支列表，在将我的产品转移到库存仓库期间，还选择了一个分支，我想保留“仓库”（它也是一个分支，它的 id 是 1）te 一直被选中.但是，如果用户想要从分支列表中选择除仓库分支之外的另一个分支，则在选择期间用户将能够使用搜索过滤器进行选择（如 select2）。在这种形式中，我已经在 vuejs 脚本中从数据库中动态获取分支。
数据：{分支：[]，分支：[@foreach($branches as $branch) {值：'{{ $branch['branchid'] }}'，标签：'{{ $branch['branchname'] }}', }, @endforeach ], }
您不能在一次选择中同时选择两个选项。当然，答案是在您的班级中将“仓库”作为默认选择，然后从下拉列表中选择第二个可选选项？

【解决方案2】：

用你想要选择的值选择 v-model 来初始化它

new Vue({
    el: '#example',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

来源：https://vuejs.org/v2/guide/forms.html#Select

【讨论】：