Vue.js　クリックイベントでボタンの色を変更する。

前提・実現したいこと

プログラミング初心者です。
以下のコードをみると薄いグレーの領域があると思うのですが、そこにマウスを持っていくと右上にボタンが表示されると思います。
このボタンをクリックしたら星の色を黄色にし、マウスを離しても表示されたままにしたいのですが
星マークが黄色にすることができません。
星の部分にselectedというクラスを追加し、CSSで黄色にしようとしていますが、なぜできないのか原因についてわかりますでしょうか?
Console.logでVue.jsのmethodに定義しているfavoriteButtonClick(index)には入っていることは確認できました。
なので、イベント自体はできていると思います。

発生している問題・エラーメッセージ

エラーメッセージはありません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7  <title>Flickr API Test</title>
8  <!-- Bootstrap CSS -->
9  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10  <link rel="stylesheet" href="main.css">
11<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
12</head>
13
14<body>
15  <div id="app">
16
17    <div class="wrapper">
18      <div id="contents">
19        <div class="category">
20          <div class="category_title">
21            近日発売予定の本
22          </div>
23          <div class="all_category_card">
24            <div class="category_card" v-for="(rs_book,index) in rs_books" v-bind:key="index" v-on:mouseenter.self="favoriteButtonShow(index)" v-on:mouseleave.self="favoriteButtonHidden(index)">
25              {{rs_book}}
26              <div class="favorite_button" v-bind:class="{isShow:index===selectIndex}" v-on:click="favoriteButtonClick(index)">
27              <span class="fas fa-star star" v-bind:class="{selected:index===selectFavorite}"></span>
28              </div>
29            </div>
30          </div>
31          
32        </div>
33      </div>
34    </div>
35  </div>
36
37  <script src="main.js"></script>
38  <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
39</body>
40
41</html>
42

CSS
1.wrapper{
2  display: flex;  
3}
4
5.category_title{
6  font-size: 28px;
7  font-family: "Arial";
8  font-weight: 700;
9  width: 100vh;
10}
11.all_category_card{
12  display: flex;
13  overflow-x: scroll;
14  width: 90vw;
15}
16.category_card{
17  max-width: 297px;
18  min-width: 198px;
19  height:200px;
20  background-color: rgba(55,62,62,0.04);
21  cursor: pointer;
22  position: relative;
23  margin-right: 5px;
24}
25.favorite_button{
26  width: 26px;
27  height: 26px;
28  background: #ffa500;
29  border-radius: 50%;
30  text-align: center;
31  line-height: 25px;
32  position: absolute;
33  top:0px;
34  right:0px;
35  background-color: #00CCFF;
36  display: none;
37}
38.favorite_button.isShow{
39  display: block;
40}
41.star{
42  color:white;
43}
44.star.selected{
45  color:#FFD700;
46  font-size: 1px;
47}
48

javascript
1new Vue({
2  el: "#app",
3  data: {
4    searchText: "",
5    rs_books: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"], //release_scheduled_books,近日発売予定の本
6    featured_books: [],//注目のアイテム
7    selectIndex:null,
8    selectFavorite:null,
9  },
10  created() {
11      
12  },
13  methods: {
14    
15    favoriteButtonShow(index){
16      this.selectIndex=index;
17    },
18    favoriteButtonHidden(index){
19       this.selectIndex=null;
20    },
21    favoriteButtonClick(index){
22      console.log("入った");
23      this.selectFavorite=index;
24    },
25  }
26});
27

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

見たところVue.jsは動いているようですが、Vueの要素をiconのscriptか何かが上書きしているようです。
試しに、アイコンのクラスを外してデベロッパーツールでクラスが付与されるか確認してみてください。

html
1<span v-bind:class="{selected:index===selectFavorite}"></span>

投稿2021/06/21 18:30

runnynose

総合スコア508

vulegonggl

2021/06/21 22:38

すみません、こちらの件ですが <div class="favorite_button" v-bind:class="{isShow:index===selectIndex,ここに追加したいクラスの記述}" v-on:click="favoriteButtonClick(index)"> とすることで解決していました。ありがとうございました。

行動規範の内容に同意します