Vue - 在这种情况下如何传递数组？

Question

这是我的示例代码。我想创建一个小型表单生成器。

我会有很多选择字段。如何将数组传递到循环中？我的代码不起作用，但我希望你知道我想要得到什么效果。

<template>

    <div>

        <div v-for="(input, index) in formBuilder" :key="index">

            <h1>{{ input.name }}</h1>

            <div>

                Options:<br />

                {{ formBuilder.options }}

            </div>

        </div>

    </div>

</template>

<script>

import { mapState } from "vuex";

export default {

    data() {

        return {

            formBuilder: [

                {

                    name: "Name",

                    options: this.versions,

                },

                {

                    name: "Host",

                    options: this.countryList,

                },

            ],

        };

    },

    computed: mapState(["versions", "countryList"]),

};

</script>

编辑。下面，我添加了一个有效的版本。但它能以更好的方式完成吗？这是正确的方法吗？

有用：

<template>

    <div>

        <div v-for="(input, index) in formBuilder" :key="index">

            <h1>{{ input.name }}</h1>

            <div>

                Options:<br />

                {{ input.options }}

            </div>

        </div>

    </div>

</template>

<script>

import { mapState } from "vuex";

export default {

    data() {

        return {

            formBuilder: [

                {

                    name: "Name",

                    options: [],

                },

                {

                    name: "Host",

                    options: [],

                },

            ],

        };

    },

    created() {

        this.formBuilder[0].options = this.versions;

        this.formBuilder[1].options = this.countryList;

    },

    computed: mapState(["versions", "countryList"]),

};

</script>

Answer 1

计算属性是您的“正确解决方案”。computed: {  ...mapState(['versions', 'countryList']),  formBuilder() {    return [      { name: "Name", options: this.versions },      { name: "Host", options: this.countryList },    ]  }}解释：如果您将代码放入其中，created它只会formBuilder在组件创建时准备一次。如果您使用，每次都会重新计算computed或更新。formBuilderthis.versionsthis.coutryList