ComboBox-Vorlagenkomponente mit VueJS

Question

我想使用 vuejs v3 制作一个 Combobox 模板组件，为此我有以下代码：

<template>
    <select name={{selector_name}} class= "combobox" id={{selector_id}}>
        v-for=opt in {{selector_options}} 
        <option value=opt>
            opt
        </option>
    </select>
</template>

<script>
Standard exportieren {
    Name: 'ComboBox',
    Daten() {
        zurückkehren {
            Selektorname: null,
            selector_id: null,
            selector_options: null,
        }
    },
    Requisiten: {
        Selektorname: {
            Typ: Zeichenfolge,
            erforderlich: wahr
        },
        selector_id: {
            Typ: Zeichenfolge,
            Standard: "Combobox"
        },
        selector_options: {
            Typ: Array,
            erforderlich: wahr
        }
    },
    Methoden: {
        onChange: (event) => {
            console.log(event.target.value);
        },
    },
    berechnet: {},
}
</script>

但是我使用 v-for 的方式对我来说似乎不正确,你能告诉我如何纠正吗？提前致谢.

Answer 1

我看到很多东西，为了清楚地回答你的问题，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 和 data。 Props，在数据中注入属性和值。 完全相同，但数据来自父级，您可以在父级中将值传递给子级。

因此，如果您需要传递数据，请使用 props，但不要在数据内部定义它。

有一个工作示例所有这些（我使用数据而不是道具来提高可读性）。