时间戳

首页 > 解决方案 > 如何知道 v-for 中的迭代

vue.js - 如何知道 v-for 中的迭代

问题描述

我在 Vue.js 我制作了一个无线电输入组件，我使用 v-for 来显示所有输入和标签，我想知道我是否可以告诉它从第一次迭代中将选中的属性传递给元素v-for 循环的

<div v-for="(option) in options" :key="option.name">
  <label class="form-check-label mr-2" :for="option.for">
    {{ option.name }}
  </label>
  <input
    v-model="selectedChoice" 
    class="mr-4" 
    type="radio" 
    name="radio" 
    :id="option.for" 
  />
</div>

谢谢你的帮助

标签： vue.jsiterationcheckedv-for

解决方案

如果我理解你是正确的，你想radio button从你的v-for.

您有两种选择来实现这一目标：

第一个选项
您可以selectedChoice像这样设置您的第一个选项：

data() {
  return {
    options: ['yourChoice1', 'yourChoice2'] //you have to set your array in here
    selectedChoice: 'yourChoice1',
  }
}

第二个选项
您将数据道具设置为您的第一项array- 这是因为您正在使用v-model- 您可以这样做：

this.selectedChoice = this.yourChoice[0]

希望这对您有所帮助-请告诉我！

推荐阅读