0

次のような 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 ...
                }
            }
        },

問題は、どの入力ユーザーが入力して新しい値を設定したかをどのように知ることができるかということです。

4

2 に答える 2

4

dataとで定義された属性computedは相互に排他的である必要があります。両方の場所で同じ属性を定義すると問題が発生します。また、データの下のオブジェクトにはデフォルト値が必要です。

したがって、代わりに、計算された値がすべて変換された別のオブジェクトを返すようにします。入力がバインドされている設定はそのままにしておきますv-model。次に、計算されたオブジェクトに個別にバインドし、必要に応じてユーザーに表示できます。

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

computed: {
        transformed_settings: function () {
            /* create and return an object with transformed apple, banana, orange */
        }
    },
于 2016-04-20T01:09:32.900 に答える