使用 Vue.js 通过 v-for 循环每次内联添加 1

Question

我希望每次都像您一样循环遍历 questions.questions，但我想我需要内联执行此操作，因为我想使用创建的数字来更新 item 作为在第二个循环中键入。

      <div v-for="question in questions.questions">
        {{question.question}}
        <div v-if="grouped_answers">
          <div v-for="a in grouped_answers[item].answers">
            {{a.id}}
          </div>
        </div>
        {{item += 1}}
      </div>

item 已经在数据中设置为 0，因为其他所有内容都在使用该设置 0，只是显然没有拉动其余数据。

Answer 1

我会尝试执行以下操作（伪代码，因为我不确定项目来自何处）：

<div v-for="question in questions.questions">
   {{question.question}}
    <div v-if="grouped_answers">
      <div v-for="a in grouped_answers[item].answers">
        {{a.id}}
      </div>
    </div>
   <div v-text="incrementItem(item)"></div>
</div>

在方法块中

methods: {
  ...
  incrementItem: function(item) {return item + 1}
}

基本上是这样的，您在组件中调用一个方法来完成繁重的工作。

Answer 2

根据我对阅读的理解，您需要从原始 v-for 中获取索引值才能传递给第二个。

尝试这样的事情

  <div v-for="(question, item) in questions.questions">
    {{question.question}}
    <div v-if="grouped_answers">
      <div v-for="a in grouped_answers[item].answers">
        {{a.id}}
      </div>
    </div>
  </div>

v-for中的第二个参数是循环传递的index/key。

Answer 3

尝试添加索引

<div v-for="question in questions.questions">
   {{question.question}}
    <div v-if="grouped_answers">
  <div v-for="a in grouped_answers[item].answers">
    {{a.id}}
  </div>
</div>
   <div v-text="item.index"></div>
 </div>

如果你能得到元素的索引，你就不需要写增量方法，但如果你愿意，可以这样做： ... 数据：{ number:0 } ....

methods: {

 incrementItem: function() {
    number +=1
    return number
}
}

使用 Vue.js 通过 v-for 循环每次内联添加 1

Using Vue.js to loop through with v-for adding 1 each time inline

javascript

loops

vue.js

vuejs2