免責事項:Vue.jsにはデータの入札があることを知っています。
だから私はこれを持っています:
_<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>
_
ユーザーが何かを入力するたびにupdate
というメソッドをトリガーする入力。ここでの考え方は、info
というデータプロパティの値を、ユーザーが入力に入力した値で変更することです。
ただし、何らかの理由で、データ属性の値は変更されません。現在の入力値は、update
メソッドが起動されるたびにconsole.log(value)
呼び出しでコンソールに通常出力されますが、info
属性は変更されません。
だから、この仕事をする方法は?
ここでの問題は、2つの異なるコンテキストが混在していることです。
別のスクリプトでは同じことをしていましたが、入力はマスクを適用する別のjsクリプトにバインドされていました。そのため、info
値が変更されないという問題が発生しました。
次に、このスクリプトの問題を(jsマスクスクリプトなしで)複製しようとしましたが、info
属性では何も変化していないと思ったのは、chrome拡張Vue.jsは、値を変更しなかったことを示しました。入力にどれだけ入力しても、常に空のままでした(環境の問題かもしれません)。
結局のところ、これは私の一部からの単なるハイカップであり、実際の問題は、1つの入力で2つの異なるライブラリをバインドすることにあります。そのうちの1つは機能しなくなり、これは別の質問の内容です。
私はあなたの問題が何であるか見ていません。あなたの例は完璧に動作します:
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>
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/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
info: ""
}
});
</script>
</html>