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

Question

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

Short Code;

 <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) // --  ???????????????   
}
},

Answer 1

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

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

или

  this.arr_sort = this.listshop.slice()