如何从子组件中的父组件过滤数据?

时间:2019-01-24 09:51:42

标签: vue.js vuejs2

我有一个显示数据列表的组件,我想用子组件中的不同过滤器来过滤此列表

只有在将所有内容都放在父组件中时,我才设法使用“计算”​​来做到这一点。

Test.vue
<template>
   <div>
     <filtres />
     <garage v-for="g in garages" v-bind:gar="g" :key="g.id" />
   </div>
</template>
<script>
export default {
name: 'test',
components: {
  simplecomposant,
  garage,
  filtres
},
  data(){
      return{
        garages: [],
      }
  },
  mounted(){
      var self = this;
        axios.get('FETCHAPI').then(function (response)
        {
          self.garages = response.data.datas;
        });
  },
}   
</script>

Filtres.vue
<template>
  <div>
    <label><input type="radio" v-model="selectedCity" value="All" /> All</label>
    <label><input type="radio" v-model="selectedCity" value="1" /> City 1</label>
    <label><input type="radio" v-model="selectedCity" value="2" />City 2</label>
  </div>
</template>

<script>
export default {

  name : 'filtres',
  data(){
      return{
        selectedCity : "All"
      }
  },
}
</script>

garage.vue
<template>
  <li class="aeris-simple-li">{{gar.name}}</span></li>
</template>
<script>
export default {
  name : 'garage',
  props: {
      gar: {
         type: Object
     }
  },
}
</script>

我希望当我选择一个过滤器(全部,城市1,...)时,它过滤父组件中的数据“车库”。

0 个答案:

没有答案