VUEjs 模板多个选择框

Question

所以，我被分配在工作中使用 vue，但我和 VUE 还不是朋友。目前我正面临一个我不知道如何解决的问题 - 我将用我所拥有的有限的 VUE 知识尽可能地解释它。

简单来说，我有一个 vue 组件，看起来像这样：

Vue.component('input-checkboxes', {
    template: '#input_checkboxes',
    props: ['id', 'label', 'list', 'required', 'readonly']
});

然后我有一个看起来像这样的模板：

 <template id="input_checkboxes">

    <div>
        <div>{{ label }}</div>
        <div>

            <label v-for="list_item in list">

                <input type="checkbox" v-model="value" :name="id" :required="required" :readonly="readonly" value="{{ list_item.name }}"> {{ list_item.name }}
            </label>

        </div>
    </div>

</template>

然后我有一个相当大的 vue 实例，我将这里的相关部分粘贴。

正在创建此变量：

var some_form = {
    form : {
        Endless: '',
        Amounts: '',
        Of: '',
        Names: '',
        In: '',
        The: '',
        Form: '',
        THIS-ONE: ''
    }
};


var vm = new Vue({
    el: '#form_product',
    data: $.extend({
        someStuff : 'some values',
        someLists : {}
    }, some_form),
    ready: function() {
         this.getLists(); // Fetches alot of lists
    },
    methods: {
        this.$http.get(
            framework.url('api','getLookupLists')
        ).then(function (response) {

            this.lists = response.body;
            this.pageLoading = false;
        }.bind(this));
    }

最后，我的 html 页面在许多其他字段中运行良好，有这个：

<input-checkboxes
    id="THIS-ONE"
    label="A Fitting Label"
    :value.sync="form.SomeID"
    :list="lists.AnAppropriateList">
</input-checkboxes>

所以，这就是设置的要点。我有许多其他组件，例如输入文本，它们工作得很好（其他人在我之前做到了），我什至通过复制他的方式创建了其他组件，并且只是更改了一些元素。

我无法让复选框起作用，我认为我的问题是有很多输入，而且我不知道如何将这些输入的结果绑定到我的 VUE 实例。

我真的希望这是有道理的，因为我真的很想要一些关于如何开始的指针......也许如果有人复制这个设置真的很简单，并展示了复选框中的值数组如何绑定到 vue 实例?

Answer 1

您正在（或可能）犯一些错误。

1. 首先，你传递的 value prop 必须是一个数组（似乎 就像它是您示例中的字符串）
2. value 设置不正确，需要通过:value="someValue" 进行设置；属性中不能有花括号。

3. 最后，value 应该是项目的 id 而不是名称。如果你使用这个名字，你有可能发生碰撞。

   • 奖励：您根本不需要使用:name（除非您提交表单服务器端...？但我不明白您为什么要这样做。）

下面是一个简单的工作示例来总结这一点：

HTML

<label v-for="list_item in list">
    <input type="checkbox" v-model="value" :required="required" :readonly="readonly" :value="list_item.id"> {{ list_item.name }}
</label>

JS

var app = new Vue({ 
  el: 'main', 
  data: function () { 
    return { 
      value: [],
      label: 'Label name',
      readonly: false,
      required: true,
      list: [
        {
          name: 'Item 1',
          id: 'item1'
        },
        {
          name: 'Item 2',
          id: 'item2'
        }
      ]
    }
  } 
})

我还制作了a bin 供你试用。