[Q&A] The value for a v-bind expression cannot be empty.

The value for a v-bind expression cannot be empty.

解決したいこと

Vue.jsのチュートリアルをやっています。
JSONオブジェクトを動的にループして、
htmlテーブル作りたいのですが

発生している問題・エラー

CHROMEでデバッグするとエラーメッセージが出ています。

The value for a v-bind expression cannot be empty. Found in "v-bind:"

該当するソースコード

https://teratail.com/questions/189117

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  <div id="app">
    <div class="container-fluid">
        <p>

    <table class = "table table-striped table-hover">
        <tr v-for="(raw,rawi) in item_list" : key = "rawi">
            <td v-for="(cell,celli) in raw" : key = "rawi * 10 + celli">{{cell}}</td>
        </tr>
    </table>
</p>
</div>
</div>
</body>

<script>
Vue.config.devtools = true;
var d = { item_list: [["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"]], };
dd = eval(d);

      var app = new Vue({
  el: '#app',
  data:function(){ return {item_list: dd }; }
})
  </script>

自分で試したこと

どうもvue.jsが良く分かりません
この後はflaskのテンプレートでJSONデータを渡す予定です

Ps.
　そもそもの動機がHtmlのTableタグを、JSONサイズに合わせて
行列を可変したいのですが、今回vue.jsを初めて触りました。

　他にもBESTなソリューションがあれば、それでも良いです。

1Answer

@uasi posted at 2020-09-28

: key = "..." のようにスペースを空けてはいけません。必ず詰めて :key="..." と書いてください。 :key でひとつの属性名だと考えればいいです。
d はオブジェクトなので dd = eval(d); のように eval する必要はありません。
data:function(){ return {item_list: dd }; } ですが、ここで dd == { item_list: ... } なので return { item_list: { item_list: ... } } となり構造がおかしいです。 return d; で十分です。
HTML の仕様により、 <p> タグの中に <table> タグは入れられません。ここでは <p> タグを取り除いても問題ありません。

以上を踏まえて書き直すと動くようになります。

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="container-fluid">
        <table class="table table-striped table-hover">
          <tr v-for="(raw,rawi) in item_list" :key="rawi">
            <td v-for="(cell,celli) in raw" :key="rawi * 10 + celli">
              {{cell}}
            </td>
          </tr>
        </table>
      </div>
    </div>

    <script>
      Vue.config.devtools = true;
      var d = { item_list: [["a", "b", "c"], ["d", "e", "f"],["g", "h", "i"]] };

      var app = new Vue({
        el: "#app",
        data: function () {
          return d;
        },
      });
    </script>
  </body>
</html>

0Like

Comments

@EasyCording
Questioner
ありがとうございました

:key は　v-bind:key　の省略表記だったのですね。

また次の関門があり、別途質問を出させていただきます。

Are you sure you want to delete the question?