Vue js使用v-for在选择中显示选项答案

【问题标题】：Vue js showing options in select using v-forVue js使用v-for在选择中显示选项
【发布时间】：2022-01-18 14:34:22
【问题描述】：

我制作了 Todo 应用程序，并将使用 v-for 循环将 priorityTypes 显示为选择选项。不幸的是，没有显示低、中、高选项。如何在选择中显示低、中、高选项？

<template>
  <div class="addNewArea">
    <div class="inputArea">
      <div>
        <label for="titleInput">Title</label>
        <input type="text" id="titleInput" />
      </div>
      <div>
        <label for="priorityType">Priority</label>
        <select v-model="priority" id="priorityType">
          <option
            v-for="{ priorityType, idx } in priorityTypes"
            :key="idx"
            :value="priorityType.priorityType"
          >
            {{ priorityType.value }}
          </option>
        </select>
      </div>
      <div class="htmlWrapper">
        <button>Confirm</button>
      </div>
    </div>
  </div>
</template>

<script>
const priorityTypes = [
  { priorityType: 1, value: 'Low' },
  { priorityType: 2, value: 'Medium' },
  { priorityType: 3, value: 'high' },
];
export default {
  data() {
    return {
      priorityTypes: priorityTypes,
      priority: 1,
    };
  },
  method: {},
};
</script>

当我改变时

            <option
            v-for="{ priority, idx } in priorityTypes"
            :key="idx"
            :value="priority.priorityType"
          >
            {{ priority.value }}
          </option>

这显示错误。 [Vue警告]：渲染错误：“TypeError：无法读取未定义的属性（读取'priorityType'）”

【问题讨论】：

标签： javascript html forms vue.js frontend

【解决方案1】：

正如 Robin 在他的回答中提到的那样 - v-for 的语法不正确。使用(priorityType, idx) 而不是{priorityType, idx}。

工作演示：

new Vue({
  el: '#app',
  data: {
    priorityTypes: [
      { priorityType: 1, value: 'Low' },
      { priorityType: 2, value: 'Medium' },
      { priorityType: 3, value: 'high' },
    ],
    priority: 1,
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div class="addNewArea">
    <div class="inputArea">
      <div>
        <label for="titleInput">Title</label>
        <input type="text" id="titleInput" />
      </div>
      <div>
        <label for="priorityType">Priority</label>
        <select v-model="priority" id="priorityType">
          <option
            v-for="(priorityObj, idx) in priorityTypes"
            :key="idx"
            :value="priorityObj.priorityType"
          >
            {{ priorityObj.value }}
          </option>
        </select>
      </div>
      <div class="htmlWrapper">
        <button>Confirm</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

for v-for v-for="(priorityType, idx) in priorityTypes" 这可能会解决您的问题。

【讨论】：