Vue.js 选择多个值

Question

我正在尝试在 vue.js 中使用 multiple=true 设置值来选择。当我设置 v-model 时，一切正常

<select v-model="selected" multiple style="width: 50px;">

但是当我设置 v-bind:value 时，选择标签中没有选择任何值

<select v-bind:value="selected" multiple style="width: 50px;">

Example Code

如何设置只读值来选择？

更新：我在组件中使用这个，所以不能使用 v-model，我必须使用 v-bind:value + v-on:change 对。更改功能已经完成并且工作起来就像一个魅力，所以毫无疑问。

Answer 1

我不确定，但它可能是一个选项：

new Vue({
  el: '#example-6',
  data: {
    selected: ['A', 'B'],
    options: ['A', 'B', 'C']
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example-6" class="demo">
  <select multiple style="width: 50px;">
     <option v-for="option in options" :selected="selected.indexOf (option) != -1">{{option}}</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

Answer 2

我遇到了同样的问题。我搜索了几个小时以找到转发值和事件的解决方案。

我从阅读源代码开始研究，发现了一些有趣的东西。当你使用v-model 时，vue.js 会生成a piece of code at runtime。这些代码撤消事件以简化分配。

如果选择不是多个，则保存我的生活，但问题已停留。我想属性值的绑定也有类似的东西，但我没有找到。如果有人有，我有兴趣知道来源。

最后我找到了一个简单的解决方案。目的只是转发 select 的 v-model 交互（绑定值和输入事件）。我创建了一个组件：

• 使用 getter 和 setter 计算属性 model。
• prop 值。

有了这些，我们利用了 setter 生成的代码片段，因为传递的值是经过提炼的值。 getter 不需要更复杂。

{
  props: ["value"],
  computed: {
    model: {
      get: () => {
        // value is a prop of the component
        return this.value;
      },

      set: (valueSelect) => {
        this.$emit("input", valueSelect);
      }
    }
  }
}

模板：

<template>
  <select v-model="model">
    <slot></slot>
  </select>
</template>

我希望这会有所帮助。

对不起语法，但我在 Typescript 中编写组件，所以它真的很不同。我在这里用 typescript 和 sfc 语法写。

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";

@Component
export default class SelectComponent extends Vue {
  @Prop({
    required: true
  })
  private value: any[] | any;

  @Prop({
    default: false
  })
  private multiple: boolean;

  private get model() {
    return this.value;
  }

  private set model(value) {
    this.$emit("input", value);
  }
}
</script>
<template>
  <select v-model="model" :multiple="multiple">
    <slot></slot>
  </select>
</template>

Answer 3

我想你想这样做：

<div id="example-6" class="demo">
  <select multiple disabled v-model="selected" style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

你的updated jsfiddle。

v-model 实际上在幕后使用v-bind。如果您只使用v-bind，您将丢失输入事件处理，并且输入的任何更改都不会传播到状态。

更新：

使用v-bind:value，只能选择一个选项：

v-bind:value="selected[0]" // in the select tag

你也可能喜欢：

<div id="example-6" class="demo">
  <select multiple disabled style="width: 50px;">
    <option :selected="selected[0]">A</option>
    <option :selected="selected[1]">B</option>
    <option :selected="selected[2]">C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

jsfiddle

这里有一个更优雅的方法：

<div id="example-6" class="demo">
  <select multiple disabled style="width: 50px;">
    <option v-for="(option, index) in options" :selected="selected[index]">
    {{ option }}
  </option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

jsfiddle