Question

我正在使用vuejs v.2，在我的数据结构中，我有产品和关键字他们有多对多的关系。要将关键字附加到产品我有关键字复选框的列表，当用户提交时，只有关联的关键字应附加到产品

<div class="col-md-6" v-for="keyword in keywords">
    <div class="checkbox">
        <label>
            <input type="checkbox" />
                {{ keyword.name }}
        </label>
    </div>
</div>

此处我无法将keyword.id绑定为值（v-bind:value）。

我只想向服务器提交已检查的关键字ID 请告诉我正确的方法

Answer 1

我认为您可能正在做的错误是不使用带有数组数据变量的v-model，以下是工作代码：

vue组件：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        keywords: [
            {name: 'key1', id: 1 },
          {name: 'key2', id: 2 },
          {name: 'key3', id: 3 }
        ],
        checked: []
      };
    }
})

并在HTML中：

<div id="demo">
    <div class="checkbox">
        <label v-for="keyword in keywords">
            <input type="checkbox" :id="keyword.name" v-bind:value="keyword.id"  v-model="checked"/>
                {{ keyword.name }}        
                <br>
        </label>
        <br>
        checked value: {{checked}}
    </div>
</div>

工作小提琴here

如何提交检查输入？

1 个答案: