VueJSの外部からVueJSが管理するコンポーネントの変更をトリガーする必要がある場合があります。
チェックボックスのclick()プロパティをトリガーまたは呼び出すことでこれを簡単に実行できることがわかりましたが、ainput[type=text]またはselect要素のいずれかで同じことを実行することはできません。
jsfiddleはこちら
反応性がどのように機能するかについてVueJSのドキュメントを調べましたが、ここでそれを実現する方法がわかりません。どうすればよいですか？
window.vueApp = new Vue({...})最初にVueインスタンスをグローバル変数（）に保存し、次のようにして値を変更できます。vueApp.dataValue = ...
フィドルを編集しました：https：//jsfiddle.net/jacobgoh101/q2zv5gz1/6/
Vueインスタンスをグローバル変数に保存します
window.vueApp = new Vue({ ...
およびonclick内：
<!-- totally unrelated to Vue! -->
<button onclick="vueApp.selectValue = vueApp.selectValue === 'alpha' ? 'beta' : 'alpha' " >
change select
</button>
<button onclick="vueApp.checkboxValue = !vueApp.checkboxValue" >
change checkbox
</button>
<button onclick="vueApp.textValue = Math.random()">
change input
</button>
更新
要素がVueの実装方法を知らないようにする方法が必要な場合は、プログラムで入力要素の入力イベントを適切にトリガーする方法を見つける必要があります。
イベントをトリガーするには、
.dispatchEvent(new Event('eventname'));
それで遊んだ後：https：//jsfiddle.net/jacobgoh101/q2zv5gz1/7/
change イベントは選択のために機能します
document.getElementById('select').dispatchEvent(new Event('change'));
input イベントはテキストで機能します
document.getElementById('text').dispatchEvent(new Event('input'));
注：これは、異なるブラウザ間で確実に機能しない可能性があります。これは、プログラムでユーザーアクションをシミュレートしようとしているためです。ブラウザが異なれば、ユーザーの操作も異なると思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加