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