2

我正在尝试设置value 的option selected位置。但是从 vuejs使用时我遇到了麻烦。这就是我想要做的 -option1v-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价值吗？selectedoption1

4

2 回答 2

0

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

<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，则该类本身将用作事实的来源，而不是值或被选中。您会看到我添加了一个按钮，该按钮将在选择组件上设置选定选项。

希望有帮助。

于 2019-02-08T09:46:23.167 回答
0

使用您要选择的值使用 select 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

于 2020-08-17T11:50:46.800 回答