How to change a Vue.js data value within a method called by a DOM event?
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/vue@2.1.10/dist/vue.js"></script><div id="app"> <input @input="update"> {{ info }}</div>
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.
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/vue@2.1.10/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { info: "" } }); </script> </html>