Vue.js フォーカスしている箇所のデータを維持したい

Question

###前提 実現したいこと
v-forを使って、特定のデータを一覧表示しています。
データをクリックすると、フォーカスで色が変わるようにしています。

やりたいこととしては、
フォーカスが当たっているオブジェクトのデータを取得した状態で、すすむボタンをクリックしたい
（Aを選択しているときはAのデータ、Bを選択したらBのデータ）

どうすれば、AまたはBのオブジェクトを選択したままの状態で、すすむボタンをクリックすることができるでしょうか。方法は問いませんので、良い方法があればご教示下さい。

問題

@focusイベントを作って、AまたはBを選択し、データを取得することまではできました。
が、すすむボタンをクリックすると、フォーカスがすすむボタンに当たるため、AまたはBのフォーカスを維持できません。
すすむボタンをクリックしても、上記（AやB）のフォーカスしたデータを保持したいです。

ソース（一部）

HTML

        <div v-for="object in data.loginListData" 
          :key="object.code"
          >
      <button 
        class=" sentakclick "
         @focus="isFocus(object)"
        :data-index="data.index"
      >{{ object.kigyomei}}</button>
        </div>

    <!-- ボタン-->
      <button 
           @click="ClickAction()">
        すすむ
      </button>

Javascript

 //選択したオブジェクトデータの取得
isFocus(object){
　//選択したオブジェクトデータの取得
　this.selectData = JSON.stringify(object);
    },

css

.sentakuclick:focus {
  background: rgba(213, 225, 241, 0.71);
}

いただいた回答をもとに追記

HTML

   <!-- 前画面で取得した値をv-forで一覧表示   -->
        <div v-for="object in data.loginListData" 
          :key="object.kigyocode"
          :class="{focused: isSelected(selectData)}"<!-- ←追記箇所 -->
        >

      <button 
        class=" form-control w-300px h-55px d-block border-1px-blue-004BB1 pl-4 pr-4 radius-5px f-12px text-black-0D0D0D mb-3 input_radio_toggle2 "
       @focus="isFocus(object)"
      >{{ object.kigyomei}}</button>
        </div>

    <!-- ボタン-->
      <button 
              class="btn w-150px h-28px text-center rounded-pill f-12px text-white bg-blue-013440 mx-auto d-block"
              @click="kigyousentakuClick()">
        すすむ
      </button>

css

.focused {
  
  background: rgba(213, 225, 241, 0.71);
}

JavaScript

    //（追記箇所）オブジェクトが選択されているときだけクラスを付与する
    isSelected(object) {
    const selectedObject = JSON.stringify(this.selectData) // 選択中のオブジェクト
    return object.kigyocode === selectedObject.kigyocode // 選択中のものと渡されたものIDが等しいならばtrueを返す

   //選択したデータ取得
    isFocus(object){
      
      this.selectData.eigyoshocode = object.daihyoeigyoshocode;
      this.selectData.kigyocode = object.kigyocode;

  
    },

詰まっているところ

うまくtrueが返っていないのか、cssのclassが適用されません。

data.loginListDataのobjectが、何らかのidを持っている必要があります（でないと各objectが識別できないため）
なのでuserIdというプロパティを持っているとして話を進めます。

こちらでご教示いただいたuserIdは、kigyocodeが該当すると認識しているため書き換えています。

検証ツールで試したところ、

return object.kigyocode === selectedObject.kigyocode

object.kigyocodeとselectedObjectには同じkigyocodeの値が入っているようには見えますが、
electedObject.**kigyocode **のkigyokodeの中身は「undefind」でした。

何かコードが違っているのでしょうか。ご教示いただければ幸いです。

Answer 1

:focus擬似クラスでスタイルを当てるのではなく、オブジェクトが選択されているときだけクラスが付与されるようにすれば良いと思います。

参考：クラスのバインディング

例えば、

.focused {
  background: rgba(213, 225, 241, 0.71);
}

<button 
  :class="{focused: isSelected(object)}"
  @focus="isFocus(object)"
  :data-index="data.index"
>
  {{ object.kigyomei}}
</button>

とすると、isSelected(object)がtrueのときだけfocusedというクラスが付与されます。

つまり後はisSelected(object)を、渡されたobjectが選択されている場合のみtrueになるようにmethods内に作成すればOKです。

追記
コメントではマークダウンが書けないのでこちらに書きます。

まずdata.loginListDataのobjectが、何らかのidを持っている必要があります（でないと各objectが識別できないため）
なのでuserIdというプロパティを持っているとして話を進めます。

this.selectDataには現在選んでいるオブジェクトが文字列化して保存されているはずなので、それをオブジェクトに戻し、userIdを比較すれば等しいかどうか判定できます。

methods: {
  isSelected(object) {
    const selectedObject = JSON.parse(this.selectData) // 選択中のオブジェクト
    return object.userId === selectedObject.userId // 選択中のものと渡されたもののIDが等しいならばtrueを返す
  }
}

** 追記2 **
遅くなってしまいましたがこちら進捗いかがでしょうか。

selectedObject.kigyocode のkigyokodeの中身は「undefind」でした。

これは前の行で JSON.stringifyを行って文字列にしてしまっているからですね。

this.selectDataは以前は文字列でしたが現在はオブジェクトとして保存しているようですので、JSONをどうこうする必要なく、そのままkigyocodeを比較すれば大丈夫です。

Comments

[hafmk]

ご回答ありがとうございます。
早速試したいのですが、初心者のため下記メソッドの内容の記述方法がわかりません。
>後はisSelected(object)を、渡されたobjectが選択されている場合のみtrueになるようにmethods内に>>作成すればOKです。
こちらもご教示いただけますと幸いです。。。

[hafmk]

Masa-Shin様
コードの追記誠にありがとうございました。
頂いた内容で試行錯誤していたため、お礼が遅くなり申し訳ございません。
詰まってしまったため、追記を記入いたしました。再度ご回答いただければ幸いです。