使用Vue.js循环使用v-for每次内联加1答案

【问题标题】：Using Vue.js to loop through with v-for adding 1 each time inline使用Vue.js循环使用v-for每次内联加1
【发布时间】：2017-01-24 20:32:05
【问题描述】：

我希望每次添加都像您一样循环遍历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，只是显然没有将其余数据拉出。

【问题讨论】：

是item问题的索引吗？
是的，这基本上就是我想要的，为每次迭代创建一个数字 0,1,2,3 可以插入要在其中使用的项目。

标签： javascript loops vue.js vuejs2

【解决方案1】：

根据我理解的阅读方式，您需要从原始 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中的第二个参数是循环传递的索引/键。

【讨论】：

【解决方案2】：

我会尝试执行以下操作（伪代码，因为我不确定 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>
   <div v-text="incrementItem(item)"></div>
</div>

在方法块中

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

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

【讨论】：

感谢您的回复。我确实添加了一次，但没有更新第二个循环中的密钥或继续为每个第一个循环添加一个。我该怎么做？
能不能每次都拿到第一个循环的key？

【解决方案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>

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

methods: {

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

【讨论】：