vue.jsでjsonファイルの配列データに置いたID番号を<input>タグのid番号として取り込みたい

Question

前提

vue.jsを始めたばかりで基本的なことが分からなくて困っています。

簡単に言うと、外部ファイルでリンクさせた配列データのうちの、ID番号（数字だけ）を
HTMLの<input>タグ内にID番号として入れるにはどうしたらいいかが分かりません。

<input type="checkbox" id="ここに配列のidに入れた数字を入れたい" class="acd-check">

このように書いたら、文字列として表示されてしまいます。
<input type="checkbox" id="{{ item.id }}" class="acd-check">

ちなみに#appの全体のコードは以下のとおりです。

  <div id="app"> 
     
    <!-- 外部から取り込んだJSONデータを表示  -->
    <div v-for="(item, index) in list" v-bind:key="item.id">
        <div v-if="item.id === 1 || item.id === 3">
        <!-- {{ item.num }} {{ item.qus }}  {{ item.ans }} -->

        <input type="checkbox" id="ここに配列のidに入れた数字を入れたい" class="acd-check">
        <label for="ここに配列のidに入れた数字を入れたい" class="acd-label"><h3 class="accordion_header"><span>{{ item.num }}</span>{{ item.qus }}<div class="i_box"><i class="one_i"></i></div></h3></label>
        
          <div class="acd-content">
            <div class="">
              <!-- アンサー -->
              <div class="">
                <dl>
                  <dt><span>{{ item.num }}</span></dt>
                  <dd>
                    <p class="mt20">{{ item.ans }}</p>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        
        
　</div>
　</div>
　</div>

vue.jsのコードは、下記のように記述しています。

/*
 外部JSONデータの取得
*/

var app = new Vue({
  el: '#app',
  data: {
      list: []
  },
  created: function() {
    axios.get("list.json").then(function(response) {
      this.list = response.data;
    }.bind(this)).catch(function(e) {
      console.error(e)
    })
  }


})

jsonファイルの配列には、下記のように書いています。

[
    {
        "id": 1,
        "num": "Q.01",
        "qus": "質問",
        "ans": "答え"
    },
    {
        "id": 2,
        "num": "Q.02",
        "qus": "質問",
        "ans": "答え"
    }

]

配列の文字列は、HTMLのタグで下記のように囲めば、問題なく表示されます。

<dt><span>{{ item.num }}</span></dt>
<dd>
<p class="mt20">{{ item.ans }}</p>
</dd>

でも、タグの中のidやクラス名には、どうやってjsonからひっぱって来ればよいのか分からないので、
教えていただきたいです。よろしくお願いいたします。

Answer 1

Mustache構文(二重中括弧) は、HTML 属性の内部で使用することはできません。代わりに、v-bind ディレクティブを使用してください:

<div v-bind:id="dynamicId"></div>

https://jp.vuejs.org/v2/guide/syntax.html#%E5%B1%9E%E6%80%A7

Comments

[yukinko]

ありがとうございます。v-bindでやってみたら表示できました！

<input type="checkbox" v-bind:id="item.id" class="acd-check">

こんな単純なことだったんですね。だけど、やっぱりこのページにはたどり着けなかったので、とても参考になりました。どうもありがとうございました。