Почему функция filter влияет на другой массив? Я не понимаю, как это получается, если это другой массив

#vuejs2

#vuejs2

Вопрос:

Каким волшебным образом массив this.listshop также фильтруется? Я этого не понимаю, убейте меня. В моем понимании this.listshop не должен меняться в этом случае! Но он тоже фильтруется!

Короткий код;

  <input type="text" placeholder="" v-model="search">

     data () {
                    return {
                      listshop: [],
                      arr_sort: [],
                      search: ''
    }
                },

    methods: {
      getGames() {
          axios.get('/get-jsonshop')
            .then(response => {
              this.listshop = response.data;

         this.arr_sort = this.listshop

          });

    watch: {
            search: function() {


              if (this.search.length > 0) {
              for (var i = 0; i < this.arr_sort.length; i  ) {
              this.arr_sort[i].shops = (this.arr_sort[i].shops.filter(ar => ar.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1))

     }

    }
console.log(this.listshop) // --  ???????????????   
}
},
 

Ответ №1:

Проблема в том, что вы передаете this.listshop в качестве ссылки this.arr_sort в своем getGames методе. Найдите и используйте Slice или cloneDeep from underscore . Каждый раз, когда вы изменяете arr_sort , listshop изменения также.

 this.arr_sort = _.cloneDeep(this.listshop)
 

или

   this.arr_sort = this.listshop.slice()