How to change a Vue.js data value within a method called by a DOM event?

Question

Disclaimer: I know that there is data biding in Vue.js.

So I have this:

<html>
<body>

    <div id="app">
        <input @input="update">
    </div>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">

        new Vue({

            el: '#app',

            data: {

                info: '',

            },

            methods: {

                update: function (event) {

                    value = event.target.value;

                    this.info = value;
                    console.log(value);

                }

            }

        });

    </script>

</body>
</html>

An input that will trigger a method called update every time the user type in something. The idea here is to change the value of the data property called info with the value typed in the input by the user.

But, for some reason, the value of the data attribute doesn't change. The current input value is printed normally in the console with the console.log(value) call every time the update method is fired, but nothing changes to the info attribute.

So, how to make this work?

Falko · Accepted Answer · 2022-11-04 08:29:08Z

11

I'm not seeing what your problem is; your example works perfectly:

new Vue({
  el: '#app',
  data: {
    info: '',
  },
  methods: {
    update: function(event) {
      value = event.target.value;
      this.info = value;
      console.log(value)
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <input @input="update">
  {{ info }}
</div>

edited Nov 4, 2022 at 8:29

Falko

18.2k14 gold badges65 silver badges119 bronze badges

answered Jan 28, 2017 at 0:50

RyanZim

7,0451 gold badge32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Artenes Nogueira Over a year ago

Remove the {{ info }} and see its value through chrome extension for Vue. You'll see that it won't work. I did the same thing that you did and noticed that the value only get updated when another event from the Vue instance is fired (for some reason).

Mahmud Adam Over a year ago

If you console.log(this.info) that value is getting changed. I guess I don't understand the problem you are having.

Artenes Nogueira Over a year ago

@MahmudAdam Sorry for not being clear enough. I found the problem and you can check out my answer here.

Artenes Nogueira · Accepted Answer · 2017-01-28 10:59:27Z

The problem here is that i've mixed two different contexts.

In another script I was doing the same thing, but the input was binded to another js cript that was applying a mask to it. So, that caused the problem of the info value not being changed.

Then I tried to replicate the problem in this script in the question (without the js mask script) and then I thought that nothing was changing in the info attribute because the chrome extension for Vue.js showed me that the value didn't changed, was always staying empty no matter how much i've typed in the input (so maybe an environment problem).

In the end this was just a hicup from my part and the real problem lies in binding two different libraries in a single input. Eventually one of them will not work and this is content for another question.

wandering-geek · Accepted Answer · 2017-01-28 07:48:48Z

2

You could always create a two-way data binding using v-model, thus essentially binding the value of the input field to the info property. This way, the value of info gets updated as the user enters something in the input field.

Example below:-

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Vue.js stuff</title>
    </head>
    
    <body>
    
        <div id="app">
            <div>You typed {{info}}</div>
            <br>
            <input type="text" v-model="info">
        </div>
    
    </body>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                info: ""
            }
        });
    </script>
    
    </html>

edited Jan 28, 2017 at 7:48

answered Jan 28, 2017 at 7:39

wandering-geek

1,37112 silver badges23 bronze badges

1 Comment

Artenes Nogueira Over a year ago

Thanks for the answer! But my problem was other thing actually. You can checout my answer here.

Collectives™ on Stack Overflow

How to change a Vue.js data value within a method called by a DOM event?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related