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()保持原始数组不变，结束重新运行一个新数组：

slice（）方法将数组的一部分的浅表副本返回到从开始到结束（不包括end）选择的新数组对象中。原始数组将不会被修改。

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)

如何异步更改数据数组项，添加和切片

1 个答案: