Vue.js 如何在VueJS中动态创建v模型

我对Vue比较陌生，使用的是VueJS 2最新版本

我从数据库中获取了一组数据，类似于：

{
    count: 3,
    options: {
        'red': 10,
        'blue': 20,
        'green': 30,
        'yellow': 40
    }
}

在本例3中，我想基于count的值创建一些select下拉列表，但它可以是任意数字

在每个“选择”下拉列表中，我希望显示选项，并根据必须创建的选择框数量动态地将v-model添加到选项和Vue的数据对象中

这是我的尝试，但它不起作用，因为我不知道在哪里/如何动态绑定v-model

<template>
    <div>
        <select v-for="(c, index) in count" v-model="models[index]" :key="index">
            <option v-for="(option, index) in options" :key="index">
                {{ option }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 3,
            options: {
                red: 10,
                blue: 20,
                green: 30,
                yellow: 40,
            },
            models: []
        }
    },
}
</script>

---

使用v模型动态地将值绑定到数据的最佳方法是什么？如果您还需要什么，请告诉我。

您可以使用组件实现这一点

创建一个名为：dropdown.vue//的组件，您可以使用任何名称来命名它

现在，在您的孩子身上，您可以： 编辑：现在您的组件就像一个带有自定义v型模型的选择框

现在，您可以使用组件中的v模型执行操作

---

编辑：我已经修改了组件，使其可以作为自定义v模型的下拉菜单。

一种可能的方法是用count的值填充模型数组，然后将每个SELECT的v模型绑定到模型数组中相应的元素。谢谢，这听起来是一种有趣的方法。那么，我如何在父组件中使用这些v模型值呢？假设我想将它们存储在父组件的数组/对象中。我该怎么做？如果您希望在一个位置访问所有v-model值，那么使用vuex管理数据将是一个很好的举措。。。它回答了你的问题吗？我只是想用它作为一个组件，我正在创建所有那些小的选择下拉组件。如果可能的话，我不会使用Vuex，它的设计是一个非常小的应用程序。

//dropdown.vue

<template>
    <div>
        <select :key="index" @change="emitChange">
            <option v-for="(option, index) in options" :key="index">
                {{ option }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    name: 'Dropdown',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: String
    },
    //props: ['options', 'key'],
    /*data() {
        selectValue: "", //option selected value
    }, */

    methods: {
        emitChange() {
            this.$emit('change', $event.target.value)
        }
    }
}

</script>

<template>
    <template v-for="(c, index) in count">
        <Dropdown v-model="selectedOption" :index="index" :items="options" />
    </template>
</template>

<script>
import Dropdown from 'path/to/components/dropdown'
export default {
    data() {
        return {
            selectedOption: "",
            count: 3,
            options: {
                red: 10,
                blue: 20,
                green: 30,
                yellow: 40,
            },
        }
    },
}
</script>