<template>
<div class="snippet-item">
<slot></slot>
</div>
</template>
.snippet-item::v-deep p {
color: red;
}
.snippet-item::v-deep span {
background-color: $green;
}
<SnippetItem>
<h3>Title</h3>
<p>Description</p>
<div class="tags">
<span>Frontend</span>
</div>
</SnippetItem>
mutations: {
SET_ALL_MOVIES: (state, movies) => {
state.originalMovies = [...movies.data];
const sortedMovies = movies.data;
sortedMovies.sort((a, b) =>
a.title > b.title ? 1 : b.title > a.title ? -1 : 0
);
state.sortedMoviesByTitle = sortedMovies;
console.log(state.originalMovies);
console.log(state.sortedMoviesByTitle);
state.isLoading = false;
}
},
sortedMoviesByTitle
mutations: {
SET_ALL_MOVIES: (state, movies) => {
state.originalMovies = movies.data;
const sortedMovies = movies.data.sort((a, b) =>
a.title > b.title ? 1 : b.title > a.title ? -1 : 0
);
state.sortedMoviesByTitle = sortedMovies;
console.log(state.originalMovies);
console.log(state.sortedMoviesByTitle);
}
},
Expected to return a value in "sortedMovies" computed property
data: () => ({
sortBy: "default"
}),
computed: {
...mapGetters(["MOVIES"]),
sortedMovies() {
if (this.sortBy === "title") {
console.log(this.sortBy);
return this.filterMoviesByTitle();
}
if (this.sortBy === "default") {
console.log(this.sortBy);
return this.MOVIES;
}
}
},
filterMoviesByTitle() {
const filteredArray = this.MOVIES.sort((a, b) =>
a.title > b.title ? 1 : b.title > a.title ? -1 : 0
);
return filteredArray;
}