既に存在するJavascriptでVue.jsのデータ変更を追跡していますか？

Question

私はいくつかのUI要素にvuejを使用したいと思っているプロジェクトをしばらく行っています。私はチュートリアルを起動し、基本的な例をまとめようとしました。

私はそうのような基本的なjavascriptオブジェクトがあります。私のテンプレートに

var hex = {}; 
hex.turn_phase = 'unit_placement'; 

を、私が持っている：

var app = new Vue({ 
     el: '#vue-test', 
     data: { 
      message: 'Hello Vue!', 
      turn_phase: hex.turn_phase, 
     }, 
     delimiters: ["<%","%>"], 
     mounted: function() { 
      this.fetch_turn_phase(); 
     }, 
     methods: { 
      fetch_turn_phase: function() { 
       Vue.set(this, 'turn_phase', hex.turn_phase); 
      }, 
     } 
    }); 

これは、最初は、テンプレートの正しいturn_phaseをレンダリングしますが、私は六角を変更した場合ブラウザコンソールで.turn_phaseを実行すると、テンプレートは反応しません。

この基本的な例で忘れたことはありますか？

Answer 1

Vueはすべてdataという変数を作成します。computedのプロパティと値はmethodsから返されます。 があなたのケースではhexを変更しています。これはvue変数ではないため、この変数の変更は検出されません。ただし、message変数を変更すると、反映され、テンプレート内で変更されます。

Answer 2

不必要に難しいものになったようです。 app経由でVueインスタンスにアクセスするだけですか？

Vue.jsで生成されたセッターを必ず確認してください。これらは監視され、コンポーネントを再レンダリングします。代わりに

、あなたがここでより良い理解を得ることができます

app.turn_phase = 'unit_placement'; 

を使用してみてくださいReactivity