Javascript 如何在 DOM 事件调用的方法中更改 Vue.js 数据值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41905089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a Vue.js data value within a method called by a DOM event?
提问by Artenes Nogueira
Disclaimer: I know that there is data biding in Vue.js.
免责声明：我知道 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 updateevery time the user type in something. The idea here is to change the value of the data property called infowith the value typed in the input by the user.
update每次用户输入内容时都会触发调用方法的输入。这里的想法是更改info使用用户在输入中键入的值调用的数据属性的值。
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 updatemethod is fired, but nothing changes to the infoattribute.
但是，由于某种原因，数据属性的值不会改变。console.log(value)每次update触发方法时，当前输入值都会在控制台中正常打印，但不会对info属性进行任何更改。
So, how to make this work?
那么，如何使这项工作？
采纳答案by Artenes Nogueira
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 infovalue not being changed.
在另一个脚本中，我正在做同样的事情，但输入绑定到另一个 js 脚本，该脚本对其应用了掩码。因此，这导致了info值未更改的问题。
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 infoattribute 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).
然后我尝试在问题中的这个脚本中复制问题（没有 js 掩码脚本）然后我认为info属性中没有任何变化，因为Vue.js的chrome 扩展向我显示该值没有改变，是无论我在输入中输入了多少，总是保持空白（所以可能是环境问题）。
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.
最后，这只是我的一个小问题，真正的问题在于在单个输入中绑定两个不同的库。最终其中一个将不起作用，这是另一个问题的内容。
回答by RyanZim
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>回答by kkaosninja
You could always create a two-way data binding using v-model, thus essentially binding the value of the input field to the infoproperty. This way, the value of infogets updated as the user enters something in the input field.
您始终可以使用 来创建双向数据绑定v-model，从而基本上将输入字段的值绑定到info属性。这样，info当用户在输入字段中输入内容时， 的值就会更新。
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>