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

Vue.js Set value in computed properties

本文关键字：设置 属性 计算 js Vue      更新时间：2023-09-26

我有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 ...
                }
            }
        },

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

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

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

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

最简单的方法是将apple、banana和Orange声明为数据元素或变量。根据方法下的用户输入定义函数（未计算），然后在输入框

中使用@change="CheckUserInput"属性
相关文章：