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

如https://stackoverflow.com/users/381282/michal-lev%c3%bd所述。计算属性是您的“正确解决方案”。

computed: {
  ...mapState(['versions', 'countryList']),
  formBuilder() {
    return [
      { name: "Name", options: this.versions },
      { name: "Host", options: this.countryList },
    ]
  }
}

说明：

如果将代码放入created中，则仅在创建组件时准备formBuilder一次。
如果您使用computed，则formBuilder或this.versions每次更新时，this.coutryList都会重新计算。

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

1 个答案: