vue.jsが再描写されない

Question

お世話になります
ajaxで得られた検索結果をvue.jsを使ってテーブルに出すという仕組みを作っているのですが
一回目の検索は意図したとおりに動くのですが、二回目以降"再描写"をしてくれません

一回目は動くのでPOSTやGETでページを再読み込みしてもいいのですが、せっかくJavascriptなので再読み込みなしで再描写をしたいです。

app.$forceUpdate();をつけたり
変数appを初期化してみたりしましたがダメでした

vue.jsって一度描写したら更新できないのでしょうか、ご存知の方おりましたらお助け下さいませ

$.ajax({
  type: "POST",
  url: {ENDPOINT},
  contentType: 'application/json',
  dataType: "json",
  success: function(json){
    var app = new Vue({
      el: "#hoge",
      data: json.data,
    });
  },
  error: function(json){
    console.dir(json);
  }
});

Answer 1

このように Vue の ライフサイクルメソッド（下の例では created）に書けば ajax が成功した時に data.json が書き換わります。
Vue の data は非同期で変更されても変わった時点で DOM に反映されます。

var app = new Vue({
  el: "#hoge",
  data: {
    json: {}
  },
  created: function() {
    var self = this
    $.ajax({
      type: "POST",
      url: {ENDPOINT},
      contentType: 'application/json',
      dataType: "json",
      success: function(json){
        self.json = json
      },
      error: function(json){
        console.dir(json);
      }
    });
  }
});

2回めがなにを指すかわからないのですが、一度ajaxで取得したデータを条件で変えたいという場合は 算出プロパティ を使うといいです。

再度 ajax で問い合わせるなら created でした時と同じ処理を メソッド でやり直せば、data.json が新しいものに書き換わって勝手に DOM も更新されます。

  // 省略
  methods: {
    getJson: function () { 新しいデータをajaxで取得してdata.jsonを書き換える処理 }
  }

Comments

[tesopgmh]

算出プロパティを使うことで期待する動作になりました！
vue.js奥が深いです！ありがとうございます！