Javascript 从子组件筛选数组数据表

我正在将一个旧的PHP/jquery单页应用程序迁移到VueJS/Webpack，以适应后者的使用。这是一个简单的表，它从JSON API获取数据，并使用过滤器控件（在它们自己的组件中）。一切正常，除了我尝试使用我的子组件中的控件筛选我的表。我已经为用作表数据源的数组设置了一个道具

我的

App.vue

模板如下所示：

<template>
  <div>
      <fan-modals v-bind:fans="fans"></fan-modals>

      <div class="container">
          <filter-controls v-bind:fans="fans"></filter-controls>
          <fans v-bind:fans="fans"></fans>
      </div>  <!-- end #container -->
  </div>
</template>

<script>
  import FilterControls from './components/FilterControls.vue';
  import Fans from './components/Fans.vue';
  import FanModals from './components/FanModals.vue';


  export default {
    name: 'app',
    data: function() {
      return {
        fansUrl: 'example.com',
        fans: []
      }
    },
    components: {
      filterControls: FilterControls,
      fans: Fans,
      fanModals: FanModals
    },
    methods: {
        getFans: function (data) {
            var self = this;
            $.getJSON(self.fansUrl, function(data){
                self.fans = data;
            });
        }
    },
    mounted() {
        this.getFans();
    }
}
</script>

它引用了从

var filtered=$.grep（fans，function（fan）

开始的行，所以我猜它在遍历我的

fans

数组时遇到了问题

---

我知道有更好的方法可以做到这一点，但我对VueJS非常陌生。我是否遗漏了一些非常明显的东西？

问题可能在于您使用按钮的事件处理程序绑定。例如，您可能会遇到以下问题：

<button @click="filterFans()">Filter fans</button>

或者更新

filterFans

以读取

此。直接扇入
：

filterFans() {
  const filtered = $.grep(this.fans, /* ... */);
}

在每次调用该变量时使用
this.fans
<button @click="filterFans()">Filter fans</button>

<button @click="filterFans(fans)">Filter fans</button>

filterFans() {
  const filtered = $.grep(this.fans, /* ... */);
}