我想制作一個Combobox模板組件，vuejs v3為此我有以下代碼：
<template>
<select name={{selector_name}} class= "combobox" id={{selector_id}}>
v-for=opt in {{selector_options}}
<option value=opt>
opt
</option>
</select>
</template>
<script>
export default {
name: 'ComboBox',
data() {
return {
selector_name: null,
selector_id: null,
selector_options : null,
}
},
props: {
selector_name: {
type: String,
required: true
},
selector_id: {
type: String,
default: "combobox"
},
selector_options: {
type: Array,
required: true
}
},
methods: {
onChange: (event) => {
console.log(event.target.value);
},
},
computed: {},
}
</script>
但是我使用的方式對我v-for來說似乎不正確，你能告訴我我該如何糾正嗎？提前致謝。
uj5u.com熱心網友回復：
我看到很多東西，要清楚并回答您的問題， v-for 用于元素。
<template>
// For mor readability i recommend you do bind your property:
// - name={{selector_name}} become :name="selector_name"
<select :name="selector_name" class= "combobox" :id="selector_id">
<!-- v-for is required with a unique key, you can take the index and use it -->
<option v-for="(opt, index) in selector_options" :key="`opt ${index}`" value=opt>
{{ opt }}
</option>
</select>
</template>
您不能定義具有相同名稱的道具和資料。道具，在資料中注入屬性和值。完全相同，但資料來自您將值傳遞給子級的父級。
因此，如果您需要傳遞資料，請使用 props，但不要在資料內部定義它。
所有這些都有一個作業示例（我使用資料而不是道具來提高可讀性）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/522428.html