我制作了 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'）”
uj5u.com熱心網友回復：
正如 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>uj5u.com熱心網友回復：
for v-forv-for="(priorityType, idx) in priorityTypes"這可能會解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/414173.html
標籤：
上一篇：如何使用Vue.js將多個影像上傳到firebasev9存盤并獲取所有下載URL以在云Firestore資料庫中更新它