vue.js - vue js中带有输入组的多个动态复选框

Question

我正在尝试制作一个包含输入组部分的表单，在该组中，有一个选择框和多个复选框。复选框根据选择框的选择进行填充。还有一个添加和删除按钮来生成和删除输入组。选择框与 v-model 一起使用来过滤复选框。但是当我生成一个新的输入组并进行更改时，所有复选框都会更改。我希望他们被隔离。我怎样才能实现？

---

这是我的模板。

<template>
    <form @submit.prevent="onSubmit">
        <div v-for="(variationProduct, index) in variationProducts" :key="variationProduct.id">
            <div class="from-group mb-4">
                <label class="col-form-label"><b>Categories :</b></label>
                <select class="form-control mr-2" ref="categories" v-model="category">
                    <option value="0">Please select category...</option>
                    <option v-for="category in categories" :key="category.id" :value="category.id">
                        {{ category.name }}
                    </option>
                </select>
                <div v-if="hasError">
                    <validation-errors v-if="errors['categories.'+index]" :errors="errors">
                        {{ errors['categories.'+index][0] }}
                    </validation-errors>
                </div>
            </div>
            <div class="form-group mb-4">
                <label class="col-form-lablel"><b>Variation Products :</b></label>
                <div class="row">
                    <div v-for="filteredVariationProduct in filteredVariationProducts" :key="filteredVariationProduct.id">
                        <div class="col-12">
                            <input :id="filteredVariationProduct.id" :value="filteredVariationProduct.id" type="checkbox" ref="variationProducts">
                            <label :for="filteredVariationProduct.id">{{ filteredVariationProduct.name }}</label>
                        </div>
                    </div>
                </div>
                <div v-if="hasError">
                    <validation-errors v-if="errors['variationProducts.'+index]" :errors="errors">
                        {{ errors['variationProducts.'+index][0] }}
                    </validation-errors>
                </div>
            </div>
            <div class="float-right">
                <button @click.prevent="add" class="btn btn-success">Add</button>
                <button @click.prevent="remove(index)" class="btn btn-danger">Remove</button>
            </div>
            <br>
            <br>
            <hr>
        </div>
        <input type="submit" class="btn btn-primary" value="Submit">
    </form>
</template>

---

这是我的 JS。

<script>
import ValidationErrors from './ValidationErrors.vue';

export default {
    components: { 
        'validation-errors': ValidationErrors,
    },
    data () {
        return {
            variationProducts: [],
            categories: [
                { id: 1, name: 'Technology'},
                { id: 2, name: 'Business'},
                { id: 3, name: 'Marketing'},
                { id: 4, name: 'Development'},
                { id: 5, name: 'Engineering'},
            ],
            category: 0,
            activeVariationProducts: [],
            count: 1, 
            errors: {},
            hasError: false,
        }
    },
    methods: {
        add: function() {
           this.count++;
           this.errors = {};
           this.hasError = false;
           this.variationProducts.push({ id: this.count });
        },
        remove: function (index) {
            if ( this.variationProducts.length > 0 && index > -1) {
                this.variationProducts.splice(index, 1);
            } else {
                alert('Must have at least one input!')
            }
        },
        onSubmit: function() {
            console.log(this.$refs.variationProducts.value);
        },
        generateVariationProducts: function(num) {
            for(let i = 1; i <= num; i++) {
                let activeVariationProduct = {
                    id: i,
                    name: 'Product '+ i,
                    category_id: i
                };
                this.activeVariationProducts.push(activeVariationProduct);
            }
        },
    },
    computed : {
        filteredVariationProducts: function () {
            let categoryId = parseInt(this.category);
            if (categoryId !== 0) {
                let filteredVariationProducts = this.activeVariationProducts.filter((variationProduct) => {
                    return variationProduct.category_id === categoryId;
                });
                return filteredVariationProducts;
            } else {
                let filteredVariationProducts = this.activeVariationProducts;
                return filteredVariationProducts;
            }
        }
    },
    created () {
        this.variationProducts.push({ id: this.count });
        this.generateVariationProducts(10);
    },
}
</script>

Answer 1

这是一个示例代码。此代码显示了如何使用动态生成的多个复选框以及如何将它们隔离 -

new Vue({
  el : "#app",
  data : {
    Items : ["One", "Two", "Three"],
    newCheckbox : "",
    SelectedItems : {
      'One' : "",
      'Two' : "",
      'Three' : "",
    },
  },
  methods:{
    add:function(){
      Vue.set(this.SelectedItems, this.newCheckbox, false);
      this.Items.push(this.newCheckbox);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js" type="text/javascript"></script>
<div id="app">
  
  <div>
    <label v-for="(item, index) in Items">
      <input type="checkbox" v-bind:key="index" v-model="SelectedItems[item]"> {{ item }} 
    </label>
  </div>
  <div>
    <input type="text" v-model="newCheckbox">
    <button @click="add">Add</button>
  </div>
  <div>
    Output : {{ SelectedItems }}
  </div>
</div>

您可以动态添加新的复选框，但它们仍然是隔离的