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

您（或可能）犯了几个错误。

首先，你传递的价值道具必须是一个数组（似乎喜欢它的例子中的字符串）
value未正确设置，您需要通过:value="someValue"进行设置;你不能在属性中使用curlies。
最后，值应该是项目的ID而不是名称。如果使用名称，则有可能发生碰撞。
- 奖励：您根本不需要使用:name（除非您提交表单服务器端......？但我不明白为什么要这样做。）< / LI>

这是一个简单的工作示例，总结一下：

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让你尝试一下。

VUEjs模板多个选择框

1 个答案: