タグ: Vue

こちらの方法は模索中であり一般的な解決方法ではないかもしれません。とりあえず動作するというレベルになります。既存の処理を置き換えつつも代替えライブラリが見つからない、または容易に実装できない際に取れる手段の1つとして考えてください。

まず例として郵便番号を住所に変換するライブラリがあるとします。zip_codeを書き込むと自動でaddressのinput要素に対してvalueで住所を自動的に設定する系になります。

<input type="tel" v-model="zip_code" name="zip_code">
<input type="tel" v-model="address" name="address">

こちらVueで上記を作成しライブラリも同様に利用した場合はzip_codeを入力した時点では自動でaddressにデータは設定されますが、Vue側にデータは渡っていないので他の要素に対して入力等イベントが発生した時にVue側に保存されているデータで上書きされます。

こちらの解決方法として再描写がされる前にVue側にデータを設定する
// 再描写(re-render)される前に呼ばれる関数
beforeUpdate: function(){
  // vueと連携していないinput要素を反映する
  this.reflectInputValues();
}
methods: {
  // vueと連携していないinput要素を反映する
  reflectInputValues: function(){
    this.zip_code = $('[name=zip_code]').val();
    this.address = $('[name=address]').val();
  }
}

ただし注意点として
・入力が完了しただけでは「reflectInputValues」が呼ばれないので対象となるデータを触りたい場合は「reflectInputValues」を明示的に呼ぶ必要がある
・Vue側から直接データを設定しても先にbeforeUpdateが呼ばれる為反映されないのでinput要素に直接valueを設定して「reflectInputValues」を呼び出す必要がある

動作はしますがVueの旨味を消している形になるので基本的にはVue用のライブラリを探す等をお勧めします。他にいい方法はないかな。