Создать динамическое поле данных, используя дочерний компонент

Question

Я хочу создать динамическое поле данных, используя значение prop, переданное в дочернем компоненте.

Код:

 ...

    <datafieldcheckbox :categories="abc" @call-method="callfilteredproducts"></datafieldcheckbox>

    new Vue({
          el: "#app",
          data: {
            abc: null, // this will generate based on a value of prop passed in child component.
            products: [
                          {
                            "id": "1",
                            "name": "Product1",
                            "abc": "EEE",
                            "skill": "Easy",
                            "color": "blue",
                            "price": 100.00
                          },
                          {
                            "id": 2,
                            "name": "Product2",
                            "abc": "EEE",
                            "skill": "Intermediate",
                            "color": "red",
                            "price": 120.00
                          },
                          {
                            "id": 3,
                            "name": "Product3",
                            "abc": "Office",
                            "skill": "Intermediate",
                            "color": "green",
                            "price": 190.00
                          }
                    ]
              ...
const dfCheckBox = Vue.component('datafieldcheckbox', {
            template: `<div id="one">
                    <h4><strong>Categories</strong></h4>
                    <ul class="categoriesFilter">
                        <li v-for="category in categories"><label><input type="checkbox" :id="category" :value="category" v-model="selectedFilters.categories" @click="filterProducts()"><span class="categoryName">{{category}}</span></label></li>
                    </ul>   
                    </div>`,
            data() {
                return{
                    products : null,
                    selectedFilters: {
                        categories: [],
                        colors: [],
                        minPrice: null,
                        maxPrice: null
                    }
                }
        },
        props : ['categories'],
        methods: {
            filterProducts(){
                    this.$emit('call-method', this.selectedFilters);
            }
        }
        });

как в коде выше Если я пишу abc , тогда он сгенерирует этот своего рода код в родительском data :

Теперь предположим, что у меня есть данные в продуктах, и я хочу найти уникальные значения передаваемого ключаиз детской подставки.

Answer 1

Просто передайте массив product дочернему компоненту и отфильтруйте категорию по флажку. Пожалуйста, попробуйте это

шаблон

<!-- child -->
<script type="text/x-template" id="grid-template">
<div>
  <h2>
  category list:
  </h2>
 <ul>
     <li v-for="category in categories">
   <label>{{category.abc}}</label>
   <input type="checkbox" :value="category" v-model="selectedCategory" @change="emitback(selectedCategory)"/>
   </li>
 </ul>
 </div>
</script>

<!-- parent  -->
<div id="demo">
  <h2>
  selected category:
  </h2>
  <ul>
    <li v-for="category in selectedCategory">
      {{category.abc}}
    </li>
  </ul>
  <datafieldcheckbox :categories="product" @call="callfilteredproducts"></datafieldcheckbox>
</div>

сценарий

Vue.component('datafieldcheckbox', {
  template: '#grid-template',
  props: {
    categories: Array,
  },
  created(){
    console.log(this.categories);
  },
  data: function () {
    return {
      selectedCategory:[]
    }
  },
  methods: {
        emitback(selectedVal){
            this.$emit('call',selectedVal);
    }
  }
})

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    selectedCategory:[],
    product:[
              {
                "id": "1",
                "name": "Product1",
                "abc": "EEE",
                "skill": "Easy",
                "color": "blue",
                "price": 100.00
              },
              {
                "id": 2,
                "name": "Product2",
                "abc": "EEE",
                "skill": "Intermediate",
                "color": "red",
                "price": 120.00
              },
              {
                "id": 3,
                "name": "Product3",
                "abc": "Office",
                "skill": "Intermediate",
                "color": "green",
                "price": 190.00
              }
         ]
  },
  methods:{
    callfilteredproducts(event){
    console.log(event);
      this.selectedCategory = event
    }
  }
})

демо Jsfiddle