Vue js 使用 v-for 在 select 中显示选项

Question

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

<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'）”

Answer 1

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

Answer 2

正如罗宾在他的回答中提到的那样——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>

Vue js 使用 v-for 在 select 中显示选项

Vue js showing options in select using v-for

html

javascript

forms

frontend

vue.js