Фильтр массива с реквизитом, кажется, не работает правильно

Question

Согласно документу , использование filter должно быть очень хорошо.Но мой не работает: (попробуйте нажать Remove One, затем Filter One, а затем снова на Remove One, а затем, как видите, Remove работает, но 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
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <mytest :answers="answers"></mytest>
  <input @click="removeOne" type="button" value="Remove One" />
  <input @click="filterOne" type="button" value="Filter One" />
</div>

Answer 1

Ваша проблема заключается в следующем:

• У вас есть два компонента (#app и mytest)
• answers - это массив в данных #app
• Вы передаете ссылку на массив #app answers компоненту mytest в качестве реквизита.
• в removeOne вы изменяете родительский массив answers.Это тот же массив, который видит mytest, и, следовательно, представление mytest обновляется, отражая это изменение
• в filterOne, которое вы не изменяете в исходном массиве.Вы заменяете родительский массив answers другим с некоторыми отфильтрованными элементами.Однако у компонента mytest все еще есть ссылка на исходный массив answers, который был передан в качестве реквизита, который никем не был изменен, и, следовательно, представление не изменяется.