jQuery側からVue.jsのdataを書き換える

buttonをクリックするとvue.jsのshowをtrue/falseでtoggle切り替えしつつajaxでPOSTするものです。
例えばこれでajaxが失敗(fail)した場合にvue.jsのshowをfailに書き換えたいと考えています。

HTML
1{{show}}
2<button type="button" v-on:click="show = !show, posting()">Togglg</button>

const vm = new Vue({
  el: '#app',
  data: {
    show: true,
  },
  methods: {
    posting: function() {
        var hostUrl= 'http://localhost/param.php';
        var param1 = 1;
        var param2 = 2;
        $.ajax({
            url: hostUrl,
            type:'POST',
            dataType: 'json',
            data : {parameter1 : param1, parameter2 : param2 },
            timeout:3000,
        }).done(function(data) {
            alert("ok");
        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }).always(function(XMLHttpRequest, textStatus, errorThrown) {
            alert("always");
        })
    }
  }
})

内容としては alert("error"); の部分にvue.jsのdataを書き換える記載が必要になるかと思いますが、jQuery側からVue.jsの data: { show: true } 書き換える方法が分かりません。
dataを変更する手法をご教示いただければと思います。
また、そもそもの手法自体が好ましくないといったことでも構いませんのでご指摘いただければと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

Vue.jsのmethodsで宣言されたメソッド内では、
thisがVueインスタンス自身に束縛されるので、
this.showを書き換えることで、Vueインスタンスのdataを変更することが出来ます。

js
1methods: {
2  posting: function () {
3    this.show = false; // Vueインスタンスのshowをfalseにする
4  }
5}

$.ajaxのPromise(詳しくはこちら)のdone,fail等のコールバック内では、
thisがjQueryのajaxリクエストのオブジェクトに束縛されるので、
下記のコードでは、Vueインスタンスのshowプロパティを変更できていないことになります。

js
1$.ajax({
2  ...
3}).done(function(data) {
4  ...
5}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
6  this.show = false; // thisがVueインスタンスを指していないので、変更できない
7  alert("error");
8})

これを解決するためには、

Vueインスタンスへの参照を変数に格納しておく
thisの束縛を変更する
ES2015のアロー関数を使う

と言った方法があります。

1. Vueインスタンスへの参照を変数に格納しておく

Vueインスタンスにアクセス出来ればいいので、既に宣言されているvm変数が使えます。

js
1.fail(function(XMLHttpRequest, textStatus, errorThrown) {
2  vm.show = false;
3  alert("error");
4})

または、postingメソッド内でのthis(Vueインスタンスを指しています)を、変数に格納しておく方法もあります。

js
1posting() {
2  var _this = this;
3  ...
4  $.ajax({
5    ...
6  }).done(function(data) {
7    ...
8  }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
9    _this.show = false;
10    alert("error");
11  })
12}

2. thisの束縛を変更する

(function(){}).bind(束縛したいオブジェクト)を使うと、
bindメソッドを呼び出したfunction内での、
thisの参照を束縛したいオブジェクトに差し替える事が出来ます。(詳しくはこちら)

js
1.fail((function(XMLHttpRequest, textStatus, errorThrown) {
2  this.show = false; // thisはVueインスタンスを指す
3  alert("error");
4}).bind(this))

3. ES2015のアロー関数を使う

こちらが現在最も一般的な方法です。
ただし、新しいJavaScript(ES2015)のシンタックスを使用するため、IEでは動かない点についてご注意ください。
アロー関数はIE 11でも非対応となっています。
(今回は、質問者様がサンプルコード内でES2015のconstをお使いでしたので、恐らく問題無いかと思います。)

アロー関数は、ES2015で使用可能になった、関数の宣言を簡略化した記法です。

js
1// ES5
2function () { console.log('hello, world!'); }
3
4// ES2015
5() => { console.log('hello, world!'); };

アロー関数を使うと、functionキーワードで関数を宣言した場合と異なり、
thisの束縛が変わらないと言う特徴があります。(詳しくはこちら)

これを利用すると、下記のように書き変えられます。

js
1.fail((XMLHttpRequest, textStatus, errorThrown) => {
2  this.show = false; // thisはVueインスタンスを指す
3  alert("error");
4})

参考として、3のケースのコード全文を貼っておきます。

html
1<div id="app">
2{{show}}
3<button type="button" v-on:click="posting">Toggle</button>
4</div>

js
1const vm = new Vue({
2  el: '#app',
3  data: {
4    show: true,
5  },
6  methods: {
7    posting() {
8      const hostUrl = 'http://localhost/param.php';
9      const param1 = 1;
10      const param2 = 2;
11      $.ajax({
12        url: hostUrl,
13        type:'POST',
14        dataType: 'json',
15        data: { parameter1 : param1, parameter2 : param2 },
16        timeout: 3000,
17      }).done((data) => {
18        alert('ok');
19      }).fail((req, status, err) => {
20        this.show = false;
21        alert('error');
22      }).always((req, status, err) => {
23        alert('always');
24      });
25    },
26  },
27});
28