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/

Vue组件默认选择一些选项

1 个答案: