I am facing an issue in my vuejs application where I need to modify an array of items after the app has finished loading.
My current setup looks like this:
var n = 100;
var myData = [];
function loadMovies(n){
// async ajax requests
// add items to myData using 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 is connected with a
v-model="option_n_movies" v-on:change="changeN"While it almost works as intended, I suspect that there is a disconnect between app.$data.movies and myData at some point.
This means that adding items to myData does not reflect in app.$data.movies.
The problem seems to arise when using slice(): Slicing myData does not reflect in app.$data.movies, leading to a loss of connection and making further additions ineffective.
I am wondering what mistake I might be making here. Are there alternative approaches to tackle this issue?