I have 3 inputs like this:

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

When a user enter value for a input I want to get the value which user entered to process value and update new value. I am using puted properties to process value:

data() {
            return {
                settings: {}

            }
        },

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

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

The problem is how can I know which input user entered and set the new value?

I have 3 inputs like this:

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

When a user enter value for a input I want to get the value which user entered to process value and update new value. I am using puted properties to process value:

data() {
            return {
                settings: {}

            }
        },

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

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

The problem is how can I know which input user entered and set the new value?

• javascript
• vue.js
• puted-properties

• What does your getter look like? – nils Commented Apr 17, 2016 at 13:26
• @nils I don't have getter function. – user3118789 Commented Apr 18, 2016 at 7:44
• How are you using v-model="settings['apple']" then? Are you mixing $data properties with a setter? – nils Commented Apr 18, 2016 at 8:00
• @nils I just update my $data properties above. Thank you. – user3118789 Commented Apr 18, 2016 at 8:17

2 Answers 2

Attributes defined in data and puted should be mutually exclusive - defining the same attribute in both places is asking for trouble. Also, objects under data should have default values.

So, instead, have your puted return a different object which is all of the transformed values. Leave the settings that your inputs are bound to with v-model alone. Then you can bind separately to the puted object and display it to your user if you like.

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

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

The easiest way is to declare apple, banana and Orange as data elements or variables. Define functions based on a user input under methods (Not puted) then use @change="CheckUserInput" property in the inputboxes