Komponen templat ComboBox menggunakan VueJS

Question

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

eksport lalai {
    nama: 'ComboBox',
    data() {
        kembali {
            nama_pemilih: null,
            id_pemilih: null,
            pilihan_pemilih : null,
        }
    },
    alat peraga: {
        nama_pemilih: {
            jenis: rentetan,
            dikehendaki: benar
        },
        id_pemilih: {
            jenis: rentetan,
            lalai: "kotak kombo"
        },
        pilihan_pemilih: {
            jenis: Susunan,
            dikehendaki: benar
        }
    },
    kaedah: {
        onChange: (acara) => {
            console.log(event.target.value);
        },
    },
    dikira: {},
}


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

Answer 1

Saya melihat banyak perkara, untuk menjawab soalan anda dengan jelas, v-for digunakan pada elemen.

<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>

Anda tidak boleh menentukan prop dan data dengan nama yang sama. Props, menyuntik sifat dan nilai ke dalam data. Tepat sama, tetapi data datang daripada ibu bapa dan anda menghantar nilai daripada ibu bapa kepada anak.

Jadi jika anda perlu menghantar data, gunakan prop tetapi jangan tentukan ia di dalam data.

Terdapat contoh yang berfungsi semua ini (saya menggunakan data dan bukannya prop untuk meningkatkan kebolehbacaan). < /p>