Question

我尝试设置option的值为selected的{{1}} option。但是在vuejs中使用1时遇到麻烦。这就是我试图做的-

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时，有人可以帮我得到selected的值吗？{p}

Answer 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模型模式。文档明确指出，如果您使用v-model，则类本身将被用作真相的来源，而不是价值或选定的事实。您会看到我添加了一个按钮，该按钮将在选择组件上设置所选选项。

希望有帮助。

Answer 2

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

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

2 个答案: