Flickr API Test

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

近日発売予定の本

``` ```CSS .wrapper{ display: flex; } .category_title{ font-size: 28px; font-family: "Arial"; font-weight: 700; width: 100vh; } .all_category_card{ display: flex; overflow-x: scroll; width: 90vw; } .category_card{ max-width: 297px; min-width: 198px; height:200px; background-color: rgba(55,62,62,0.04); cursor: pointer; position: relative; margin-right: 5px; } .favorite_button{ width: 26px; height: 26px; background: #ffa500; border-radius: 50%; text-align: center; line-height: 25px; position: absolute; top:0px; right:0px; background-color: #00CCFF; display: none; } .favorite_button.isShow{ display: block; } .star{ color:white; } .star.selected{ color:#FFD700; font-size: 1px; } ``` ```javascript new Vue({ el: "#app", data: { searchText: "", rs_books: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"], //release_scheduled_books,近日発売予定の本 featured_books: [],//注目のアイテム selectIndex:null, selectFavorite:null, }, created() { }, methods: { favoriteButtonShow(index){ this.selectIndex=index; }, favoriteButtonHidden(index){ this.selectIndex=null; }, favoriteButtonClick(index){ console.log("入った"); this.selectFavorite=index; }, } }); ``` ### 試したことここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど）ここにより詳細な情報を記載してください。

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

質問編集履歴