Issue
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/vue@2.1.10/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?
Solution
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.
Answered By - Artenes Nogueira
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.