Vue组件默认选择一些选项

Question

更新：问题不会以“CDN”样式重现。这是完美运行的 JSBin：https://jsbin.com/ziqasifoli/edit?html,js,output

看起来它与 webpack/gulf/elixir/vuefy 中的某些东西相关联。即，所有 Laravel 5.3 基础设施。甚至不确定从哪里开始调试。

...

我正在努力使用一个简单的（如我所想的）组件，该组件将name、options 和selected 作为输入并显示多个选择框：

<!-- TagSelector.vue: -->

<template>
    <select :name="name" v-model="selected" multiple>
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
</template>

<script>
    export default {
      props: ['name', 'options', 'selected'],
    }
</script>

.

// app.js

Vue.component('tags-selector', require('./components/form_fields/TagsSelector.vue'));

const app = new Vue({
    el: '#app'
});

.

<!-- some.form.blade.php -->

<tags-selector
  class="form-control"
  name="posted_data[tags]"
  :selected="['opt1', 'opt2']"
  :options='{!! json_encode($options) !!}'
></tags-selector>

它按预期显示选择器，但没有预先选择的选项。 如何让它工作？

Answer 1

要将某些选项设置为默认选中，您需要将它们绑定到数据，为此只需复制您的 selected 属性并使用 v-model 绑定它，您可以使用创建的钩子来执行此操作：

  created: function() {
    this.selectedCopy = this.selected;
  },
  data: function(){
    return {
      selectedCopy: []
    }
  }

然后使用 v-model 简单地绑定它们：

<select :name="name" v-model="selectedCopy" multiple>
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

这是 JSFiddle：https://jsfiddle.net/3cq1jjL8/