Question

我正在尝试设置值以在vue.js中使用multi = 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

我想你想做

<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

Answer 2

我不确定，但这可能是一个选择：

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 3

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

我从阅读源代码开始研究，发现了一些有趣的东西。当您使用v-model时，vue.js会生成download the 10.14 SDK。这些代码使事件撤退，以简化分配。

在选择不是多个但问题仍然存在的情况下，这可以挽救我的生命。我想属性值的绑定也有类似的东西，但是我没有找到。如果有人拥有它，我很想知道来源。

最后，我找到了一个简单的解决方案。目的只是转发选择（绑定值和输入事件）的v模型交互。我用以下方法创建一个组件：

具有getter和setter的计算属性model。
一个prop值。

通过这些，我们可以使用带有setter的代码段，因为传递的值是精确值。吸气剂不需要更复杂。

{
  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中编写组件，因此确实有所不同。我在这里用打字稿和证监会语法写。

<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>

Vue.js选择多个值

3 个答案: