Как асинхронно изменять элементы массива данных, добавлять и разрезать

Question

Я пытаюсь изменить массив элементов в моем приложении vuejs после загрузки приложения.

У меня есть что-то вроде этого:

var n = 100;
var myData = [];
function loadMovies(n){
  // async ajax requests
  // add items to myData with myData.push()
}
loadMovies(n)


var app = new Vue({
  router,
  data: {
     option_n_movies: n
    ,movies: myData
  },
  computed: {
    n_movies(){
      return this.movies.length;
    },
  }
  ,methods: {
    changeN(){
      if(this.option_n_movies > this.n_movies) loadMovies(this.option_n_movies);
      if(this.option_n_movies < this.n_movies) {
        myData = myData.slice(0, this.option_n_movies );
      }
    },
  }
}).$mount('#app');

(option_n_movies связанос v-model="option_n_movies" v-on:change="changeN" на вход и должен позволять изменять количество элементов в моем массиве)

Это почти работает, но в какой-то момент я думаю, что связь между app.$data.movies и myData потеряна,Это означает, что я могу добавить элементы в myData, и они будут отражены в app.$data.movies.

Проблема с slice(): при нарезке myData это не отражается в app.$data.movies.Тогда связь теряется, потому что добавление больше не работает.

Что я делаю не так?
Есть ли лучшие способы сделать это?

Answer 1

Проблема в том, что slice() оставляет исходный массив нетронутым, end повторно запускает новый массив:

Метод slice () возвращает поверхностную копию частимассив в новый объект массива, выбранный от начала до конца (конец не включен).Исходный массив не будет изменен.

var myData = [1, 2, 3, 4, 5];
var myData2 = myData.slice(2)
console.log(myData)
console.log(myData2)

Итак, ваш код по существу равен:

var myData = [1, 2, 3, 4, 5];
movies = myData
myData = myData.slice(2)

// myData is not the same array as movies
console.log(myData === movies)

Вам нужно использовать splice() для удаления элементов из массива.

var myData = [1, 2, 3, 4, 5];
movies = myData
myData.splice(0, 2)

// both arrays are still the same
console.log(myData===movies)

console.log(movies)