如何在 DOM 事件调用的方法中更改 Vue.js 数据值？
Posted
技术标签:
【中文标题】如何在 DOM 事件调用的方法中更改 Vue.js 数据值？【英文标题】：How to change a Vue.js data value within a method called by a DOM event? 【发布时间】：2017-06-13 18:59:22 【问题描述】：免责声明：我知道 Vue.js 中有数据竞价。
所以我有这个：
<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>
每次用户输入内容时都会触发一个名为update 的方法的输入。这里的想法是使用用户在输入中键入的值更改名为 info 的数据属性的值。
但是，由于某种原因，data 属性的值没有改变。每次触发update 方法时，都会在控制台中通过console.log(value) 调用正常打印当前输入值，但info 属性没有任何变化。
那么，如何做到这一点呢？
【问题讨论】：
【参考方案1】：这里的问题是我混合了两种不同的上下文。
在另一个脚本中，我正在做同样的事情，但输入绑定到另一个对其应用掩码的 js 脚本。所以，这导致了info值没有被改变的问题。
然后我尝试在问题中的这个脚本中复制问题（没有 js 掩码脚本），然后我认为 info 属性没有任何变化，因为 Vue.js 的 chrome 扩展向我展示了值没有改变，无论我在输入中输入多少，总是保持空白（所以可能是环境问题）。
最后，这只是我的一个小问题，真正的问题在于在一个输入中绑定两个不同的库。最终其中一个将不起作用，这是另一个问题的内容。
【讨论】：
【参考方案2】：您始终可以使用v-model 创建双向数据绑定，从而实质上将输入字段的值绑定到info 属性。这样，info 的值会随着用户在输入字段中输入内容而更新。
示例如下：-
<!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>【讨论】：
感谢您的回答！但我的问题实际上是另一回事。你可以在这里查看我的答案。【参考方案3】：我没有看到您的问题是什么；您的示例完美运行：
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>【讨论】：
删除 info 并通过 Vue 的 chrome 扩展查看其价值。你会发现它不起作用。我做了和你一样的事情，并注意到只有当来自 Vue 实例的另一个事件被触发（出于某种原因）时，该值才会更新。
如果你 console.log(this.info) 这个值正在改变。我想我不明白你遇到的问题。
@MahmudAdam 抱歉不够清楚。我发现了问题，你可以在这里查看我的答案。以上是关于如何在 DOM 事件调用的方法中更改 Vue.js 数据值？的主要内容，如果未能解决你的问题，请参考以下文章