[Vue]INPUTの内容が管理外で変更されたときデータに値を反映するには

Question

以下のような状況で、

<div id="XXX">
    <input id="AAA" v-model="aaa">
</div>

<script>
var vm = new Vue({
    el: "#XXX",
    data: {
        aaa: ''
    }
})
</script>

input に手入力したときは vm.$data.aaa に反映されます。
vm.$data.aaa に値を代入すれば input の値が変わります。
ここまではVueの基本的なことで問題ないです。

ここでVue管理外で document.getElementById('AAA').value = '123'; などの変更がされると、
見た目にはinputの値は123になり、vm.$data.aaa の値は前の値のまま変わりません。

input の値を vm.$data.aaa に反映するにはどうするのがよいでしょうか。

input要素でinputイベントを発火すれば、Vueは紐づいているデータに値を反映してくれたのですが、これでよいのか自信がないです。

document.getElementById('AAA').value = 'Vue管理外でvalueを書き換える';

var e = document.createEvent('HTMLEvents');
e.initEvent('input', false, true);
document.getElementById('AAA').dispatchEvent(e);
//ここまでやれば vm.$data.aaa が書き換わった

これはありでしょうか。もっと良い方法があるでしょうか。

Vueの管理外でDOMが変更されるのをなくすのが一番良いと思いますが、
VueなしからスタートしたプログラムでjQueryが横からDOMを変えてくる部分があって、
とりあえず今は何とかうまく共存できないかなと考えているところです。

Answer 1

DOMの直接操作が必要になる場合は、カスタムディレクティブを使用するのがVueでは一般的な方法だと思います。
Vue.js カスタムディレクティブ

jQuery等を使ってDOMを更新する処理は全てディレクティブ内に隠蔽し、後は更新対象となる要素に作ったディレクティブを適用するだけという形にすれば、DOM更新もVueの管理下に置けますし、何よりその処理の再利用性も高まります。

Comments

[4477]

アドバイスありがとうございます。早速試してみます。