CODEWITHSUNDEEP
javascripthtmldomvue.js
Artenes Nogueira
Artenes Nogueira

Reputation: 1552

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

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?

Upvotes: 18

Views: 84789

Answers (3)

RyanZim
RyanZim

Reputation: 6994

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>

Upvotes: 11

Artenes Nogueira
Artenes Nogueira

Reputation: 1552

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.

Upvotes: 4

wandering-geek
wandering-geek

Reputation: 1380

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>

Upvotes: 2

Related Questions