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 ，那么它将在父数据中生成此类代码：

现在让我们说我有产品中的数据，我想找到从子道具传递的密钥的唯一值。

Answer 1

只需将产品数组传递给子组件，然后按复选框过滤类别。请试试这个

<强>模板

<!-- 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
    }
  }
})

demo Jsfiddle

使用子组件生成动态数据字段

1 个答案: