web-dev-qa-db-ja.com

Vue

vueで渡すオブジェクトのオブジェクトがあり、これを実行するためにこれを行っています：

 <ul>
    <li v-for="subjects in questions">
        <li v-for="question in subjects">
            @{{ question }}
        </li>
    </li>
</ul>

しかし、私はこのエラーを得ています：

プロパティまたはメソッド「subjects」はインスタンスで定義されていませんが、レンダリング中に参照されます。必ず、データオプションで反応データプロパティを宣言してください。 （ルートインスタンスにあります）

Vueでネストされたループを実行するにはどうすればよいですか？

javascriptvue.jsnested-loops
8
Victor Oliveira

ここでは例を示します。

var vm = new Vue({
  el: '#app',
  data: {
    questions: [
      {
        subjects: ['question 1.1', 'question 1.2']
      },
      {
        subjects: ['question 2.1', 'question 2.2']
      }
    ]
  }
})
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="question in questions">
      <ul>
        <li v-for="subject in question.subjects">
          {{ subject }}
        </li>
      </ul>
    </li>
  </ul>
</div>
11
Limon Monte

受け入れられた回答は、プロパティとして作成されたオブジェクト内の配列に対処します。単純な多次元配列の反復を探していたところ、このページが表示されました。したがって、後世のためにその答えも追加します。

new Vue({
  el: '#app',
  data: {
    questions: [
      ['test1.1', 'test1.2'],
      ['test2.1', 'test2.2']
    ]
  }
})
<script src="https://unpkg.com/vue"></script>

<div id='app'>

  <ol>
    <li v-for="subjects, index in questions">
      {{ index }}
      <ol type='I'>
        <li v-for="question in subjects">
          {{ question }}
        </li>
      </ol>
    </li>
  </ol>
</div>

IOW、問題のサンプルの問題は、サブリストのグループ化なしで、親<li/>内にネイキッドネスト<li/>が追加されていることです。

0
Subu Sankara Subramanian