Я использую VueJS, и у меня есть список жанровых кнопок, которые создаются динамически. Эти кнопки можно включать и выключать, и когда они включены, я хочу применить стиль CSS (например, синий фон), чтобы показать, что они выбраны. Когда они не выбраны, я хочу, чтобы они вернулись go к тому, как оно есть (белый фон с серой рамкой).
Моя проблема в том, что я не могу использовать функцию переключения цвета фона. Я попытался использовать variant="primary" так же, как и другие варианты, но это не работает. Я также попытался стереть style="border: 2px solid darkgrey; margin:2px;" при применении variant, однако это также не работает.
Я попытался просто изменить CSS кнопок, используя StackOverflow post , но это не работает.
Это кнопки разметка в моем индексе. html:
<ul style="list-style: none;">
<button v-if="ShowALLButton" v-on:click="getAllGenres" class = "btn btn-success" style="left: 0px; margin:2px;">ALL</button>
<li style="display: inline;">
<button v-for="buttons in buttonsList" v-if="ShowALLButton" v-on:click="getGenre(buttons)" :pressed.sync="buttons.state" id="buttonID" class = "btn" style="border: 2px solid darkgrey; margin:2px;">
{{ buttons.genre }}.
</button>
</li>
</ul>
По сути, вышеприведенное - это for-l oop, перебирающий мой список кнопок, представляющий собой структуру, которая выглядит следующим образом, и содержит жанр для отображения на кнопки, а также, было ли оно включено или выключено (обозначается состоянием, которое первоначально было выключено, как представлено false). Фактическая функциональность переключения работает, потому что она показывает правильные результаты жанра (ов). Но для любопытных, вот как выглядит buttonList (список объектов):
[
{ genre: "Folk", state: false },
{ genre: "Rap", state: false },
{ genre: "Pop", state: false },
...
]
Соответствующий стиль из индекса. html:
<style>
.am-active {
background-color: rgb(21, 79, 202);
color: white;
}
.am-not-active {
background-color: white;
}
</style>
Функция, которая работает с кнопками переключения и выбора жанра у меня в скрипте. js. Именно в todo! мне нужно применить правильный стиль CSS для изменения кнопок, но я не могу.
// Get Selected Genres
getGenre(button) {
console.log("ENTERED GET GENRE!!!!!!");
var selectedGenresItems = []
// keep track of selected genres
if (!this.selectedGenres.includes(button)) {
this.selectedGenres.push(button);
// todo!
console.log("inside if");
button.className += 'am-active';
console.log(button);
// ^ the above does not work, it just adds a key with "className" = "undefinedam-active" :(
}
else {
this.selectedGenres.pop(button);
// todo! must use .am-not-active
}
// you can stop reading here if you want
// print out the list
console.log("selectedGenres here:");
console.log(this.selectedGenres);
// get only items that have the desired genre
var num_matches= 0;
console.log("items length:" + this.items.length);
console.log("selectedGenres length:" + this.selectedGenres.length);
for (var start = 0; start < this.items.length; start++) {
for (var g = 0; g < this.selectedGenres.length; g++) {
if (this.items[start].primaryGenreName === this.selectedGenres[g].genre) {
console.log("we found a match!!!");
num_matches++;
selectedGenresItems.push(this.items[start]);
}
}
}
console.log("num_matches: " + num_matches);
console.log("this is my final list of selectedGenreItems:")
console.log("object: %O", selectedGenresItems);
// assign this list to filteredItems (which renders on index.html)
this.filteredItems = [];
this.filteredItems = selectedGenresItems;
// print out the items in this list
console.log("items in filteredItems:");
console.log(this.filteredItems);
}