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

Posted 2023-05-07

【中文标题】如何在 vue.js 2 中设置 v-select 中选择的选项值？

【英文标题】：How can I set option value selected in v-select in vue.js 2?

【发布时间】：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 吗？

【参考方案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