Vue.js 在計算屬性中設置值

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

最簡單的方法是將 apple、banana 和 Orange 聲明為數據元素或變量。 根據方法（未計算）下的用戶輸入定義函數，然后在輸入框中使用 @change="CheckUserInput" 屬性