Question

根据the document，使用filter应该很好。但是我的却不起作用：（尝试依次单击Remove One，然后依次单击Filter One和Remove One，然后您可以看到Remove可以运行，但是{{ 1}}没有）

Filter

new Vue({
  el: '#app',
  data() {
    return {
      answers: ['a', 'b', 'c']
    }
  },
  methods: {
    removeOne() {
      this.answers.shift();
      // console.log(this.answers);
    },
    filterOne() {
      this.answers = this.answers.filter((e) => { return e === 'b'});
      console.log(this.answers);
    }
  },
  components: {
    'mytest': {
      template: `<ul><li v-for="(v, i) in myAnswers" :key="i">{{ v }}</li></ul>`,
      props: ['answers'],
      data() {
        return {
          myAnswers: this.answers
        }
      }
    }
  }
});

Answer 1

您的问题如下：

您有两个组件（#app和mytest）
answers是#app数据中的数组
您将对#app answers数组的引用作为prop传递给mytest组件。
在removeOne中，您正在变异父answers数组。 mytest看到的是同一数组，因此mytest视图会自动更新以反映此更改
在filterOne中，您不会突变原始数组。您可以将父answers数组替换为另一个数组，并过滤掉一些元素。但是，mytest组件仍然具有对作为道具传递的原始answers数组的引用，该数组未经任何人修改，因此视图不会更改。

带有道具的数组过滤器似乎无法正常工作

1 个答案: