VueJS - Ajaxの後の親データの更新

Question

私は、jQueryプロジェクトを段階的に更新する目的でVueJSを試していますが、親コンポーネントのデータを渡す子コンポーネントの問題があります。

私の親コンポーネントが

// parent_component.js 
var parentData = {}; 
var parentComponent = Vue.component('parentComponent', { 
    data: function() { 
     return { 
      parentData: _parentData 
     } 
    }, 
    delimiters: ['((', '))'] 
}) 

$.ajax({ 
    url: '/someUrl/', 
    success: function(response) { 
     _parentData = response 
    } 

私の子コンポーネントがある：

// child_component.js 
Vue.component('child-component', { 
    template: '<div>((data.someProp))</div>' 
    props: ['data'], 
    delimiters: ['((', '))'] 
}) 

私のHTMLは次のとおりです。

// index.html 
<parent-component inline-template> 
    <child-component v-bind:data="parentData"></child-component> 
</parent-component> 

この私が初期化した後_parentData権利を更新するとき、すべてが正常に動作しますchildComponentしかし、実際にはAjax呼び出しを行い、_parentDataを更新する必要がありますが、childComponentでは更新されません。
Nb。 _parentDataオブジェクトがAjax呼び出しのコールバックにあることを確認しました。
また、私はchildComponentのcreatedオプションにAjaxコールを入れようとしましたが、これは役に立ちませんでした。

私には何が欠けていますか？

更新

私は、古典的な初心者のミスをしたと思います！前述のようにhere、Vue cannot detect property addition。したがって、非同期呼び出しを行う前に、_parentDataにsomePropプロパティを定義する必要があります。

したがって、私がvar parentData = { someProp: '' };を定義するとうまくいきます。

このフィドルを参照してください：https://jsfiddle.net/maaikeb/anr1e88n/

Answer 1

あなたは、コードのAJAXの一部を共有している場合は、多分私はより良いことができますが、私は最も簡単な方法は、子供からemitingイベントであることを考えるIMHO、および親要素でそれをキャッチAJAX呼び出しが完了したとき（成功またはエラー）。

イベントは、子供の変更を親コンポーネントに通知する方法を提供します。

テンプレートの使用法：

<my-component v-on:myEvent="parentHandler"></my-component> 
<!-- Or more succinctly, --> 
<my-component @myEvent="parentHandler"></my-component> 

イベントをトリガー：

... 
export default { 
    methods: { 
    fireEvent() { 
     this.$emit('myEvent', eventValueOne, eventValueTwo); 
    } 
    } 
} 

また、あなたがhereから抽出あなたのアプリ

の任意の場所にイベントを渡すようにグローバルイベントバスを作成することができます。

編集

[OK]を、私はあなたが問題の親を更新する際に、子供に、親からのデータdownを送信している場合は、適切な方法は、結合、二重のデータである、あなたによく理解していませんでした。

あなたの問題は、dataがコンポーネントの作成時にのみ評価され、あなたの子供は親コンポーネントの初期値で作成されることでしょう...

あなたは次のように、これを解決するために、いくつかの異なるものを試してみることができます。

1 - たぶん、あなたの問題は、変化検出caveat

たぶん、あなたがオブジェクトに新しいプロパティを作成しているに関連しています...あなたがすべき

_parentData = response 

... ...

_parentData.$set('someObject.someProperty', someValue) 

2 - ではなくcreatedの親の使用watch：

watch:{ 
    yourData() { 
     $.ajax({ 
      url: '/someUrl/', 
      content_type: 'application/json', 
      data_type: 'json', 
      success: function(response) { 
       _parentData = response 
      } 
     }) 
    }, 

3から.sync（2.0で非推奨）を使用してみてください：

<component :something.sync="variable"></component> 

4 - 匿名のAJAX呼び出しに.thisをバインドするか、矢印を使用@Bertとして機能しました：

success:() => (response) { 
       _parentData = response 
      } 

ホップそれは助けて！