Question

我有3个输入：

<input type="text" v-model="settings['apple']" />
<input type="text" v-model="settings['banana']" />
<input type="text" v-model="settings['orange']" />

当用户输入输入值时，我想获取用户输入的值以处理值并更新新值。我正在使用计算属性来处理值：

data() {
            return {
                settings: {}

            }
        },

    computed: {
            settings: {
                set: function (newValue) {
                    var parts = newValue.match(/[\s\S]{1,2}/g) || [];

           // Set new value ...
                }
            }
        },

问题是如何知道输入了哪个输入用户并设置了新值？

Answer 1

data和computed中定义的属性应该是互斥的 - 在两个地方定义相同的属性都会遇到麻烦。此外，数据下的对象应具有默认值。

所以，相反，让你的计算返回一个不同的对象，它是所有转换后的值。保留输入绑定的设置，仅使用v-model。然后，您可以单独绑定到计算对象，并根据需要将其显示给您的用户。

data() {
        return {
            settings: {
                "apple": "",
                "banana": "",
                "orange": ""
            }
        }
    },

computed: {
        transformed_settings: function () {
            /* create and return an object with transformed apple, banana, orange */
        }
    },

Answer 2

最简单的方法是将苹果，香蕉和橙声明为数据元素或变量。根据方法（未计算）下的用户输入定义函数，然后在输入框中使用@ change =“ CheckUserInput”属性

Vue.js在计算属性中设置值

2 个答案: