如何在 Vue 2 中为输入设置动态 v-model 并为此 v-model 设置值答案

【问题标题】：How to set dynamic v-model for input and set value to this v-model in Vue 2如何在 Vue 2 中为输入设置动态 v-model 并为此 v-model 设置值
【发布时间】：2020-10-15 15:18:58
【问题描述】：

我有一个用于创建动态输入字段的组件。我有一个道具 - 字段。

fields: [
            {
                label: 'Question Text',
                placeholder: 'Enter Text',
                isRequired: true,
                editable: true,
                name: 'question',
                value: '123',
            },
            {
                label: 'Button Text',
                placeholder: 'Enter Text',
                isRequired: true,
                editable: true,
                name: 'button',
                value: '',
            },
        ],

然后我将它传递给组件 SettingsViewFields.vue

<template>
    <div>
        <e-form-group v-for="(field, index) in fields" :key="index" :error="getInputError[field.name]">
            <template v-slot:label>
                {{ field.label }}
            </template>
            <e-textarea
                v-model="form[field.name]"
                :name="field.name"
                size="small"
                @input="onInput($event, field.name)"
            ></e-textarea>
        </e-form-group>
    </div>
</template>

<script>
export default {
    name: 'SettingsViewFields',

    props: {
        fields: {
            type: Array,
            default: () => [],
        },
    },

    data: () => ({
        form: [],
    }),
};
</script>

我希望来自 field.name 的输入调用的反应数据将形成：{question: '', button: ''} 但问题是我必须为输入设置正确的值，但如果我设置field.name 的值将不正确，因为对于第一次输入，它的值是：'123'。

【问题讨论】：

标签： vue.js

【解决方案1】：

你不能直接更改父组件传递的数据，当你从父组件接收到你想要更新的prop数据时，你可以复制这个，例如

 computed: {
    fieldsCopy: function () {
      return this.fields
    },
}

并在您的模板中使用 fieldsCopy，这可能会起作用。如果您还想将更新后的数据传递给 parent，请使用 emit。

【讨论】：