質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

(ラジオボタン)v-forでラベルにJSONから取得した配列データを一覧表示したが、クリックしても選択が出来ない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 187

score 9

実現したいこと:

JSONで取得した配列データをV-forで一覧表示して、選択(クリック)したラベルは色を変更したい
※複数の選択肢から一つのみ選択且つ色を変更したいので、ラジオボタンを使っています

困っていること:

JSONで取得した配列データをV-forで一覧表示 → 出来た
選択(クリック)したラベルは色を変更したい → 出来ていない

実際のコードと表示結果:

◆HTML
<!-- 前画面で取得(josn)した商品名を表示  -->
  <div class="item">
    <div
      v-for="object in data.shohinListData"
      :key="object.label"
      class="btnBlock"
      @click="isFocus(object)"
      >
      <input
        :id="object.id"
        v-model="form.search_shohin"
        type="radio"
        name="search_shohin"
        class="input_radio_toggle_w-300px "
        :value="object.value"

      />
      <label :for="object.id">{{ object.shohinmei }}</label>
    </div>
  </div>
<!--クリックイベントのメソッドは割愛  -->
◆scss

.input_radio_toggle_w-300px {
  display: none;
  & ~ label {
    display: inline-block;
    width: 300px;
    height: 55px;
    line-height: 48px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    border: 1px solid #004BB1;
  }
  &:checked {
    & ~ label {
      color: #fff;
      background-color: #4e84a6;
    }
  }
}

実行結果画像:

イメージ説明
データ「 data.shohinListData」の配列中身はv-forで取得できており一覧表示出来ていますが、
ラジオボタンの色がクリックしても変わりません。
(クリックした箇所を青にしたいのですが、クリックしても画像のまま動きません)

試したこと、実現したいこと:

下記のように記載すれば、ラジオボタンの色が動作するようになりますが、
今回v-forで回したいデータ「data.loginListData」はJSONで取得しているstorageデータのため、
下記のように固定データで一行ずつ記載するのではなく、「data.loginListData」の中身を表示して且つラジオボタンが動作するようにするコーディング方法はありますでしょうか。

 <div
    v-for="object in [
    { id: 'hoge_2', label: '商品1', value: '2' },
    { id: 'hoge_1', label: '商品2', value: '1' },
    { id: 'hoge_0', label: '商品3', value: '0' },
                    ]"
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • hatena19

    2021/04/15 11:07 編集

    SCSSコードには間違いはなさそうです。「固定データで一行ずつ記載する」方法ではうまく行くということから、出力されるHTMLが正しくないのか、あるいは、@click="isFocus(object)" の処理が怪しいです。ラジオボタンなら、クリック時に何もする必要はないはずです。

    キャンセル

  • hafmk

    2021/04/15 11:35

    hatena19様
    今回もありがとうございます。
    >click="isFocus(object)" の処理が怪しいです。
    こちらですが、次画面に遷移するためのデータ取得のメソッドが書かれており、
    システムとしては必要な内容なのですが当質問とは関係ないため内容は割愛しました。
    念のため、アドバイス通りこちらの処理は一度削除して実行してみましたが、変りはありませんでした。。。

    「固定データで一行ずつ記載する」と、ラジオボタンは動きますが、動的なデータを受け取ることが目的のため、下記の「data.shohinListData」のデータ(JSONで受け取る配列です)を、どのように記述すればよいか悩んでおります。
    「v-for="object in data.shohinListData"」

    scssとHTMLは、実行結果画像からもわかるように、データは表示できて且つUIも期待通りです。
    ただ、ラジオボタンの色が動かないため、動的なデータを表示且つラジオボタンを有効にする記述のやり方を探しております。

    キャンセル

  • Lhankor_Mhy

    2021/04/22 12:17

    idはユニークですか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • (ラジオボタン)v-forでラベルにJSONから取得した配列データを一覧表示したが、クリックしても選択が出来ない