时间戳

首页 > 解决方案 > 如何在 Vue 2 中为输入设置动态 v-model 并为此 v-model 设置值

vue.js - 如何在 Vue 2 中为输入设置动态 v-model 并为此 v-model 设置值

问题描述

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

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

解决方案

您不能直接更改父组件传递的数据，当您从父组件收到要更新的道具数据时，您可以对此进行复制，例如

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

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

推荐阅读