VueJS - 別のvueで変数を更新する

Question

vueは特定の行が選択されたときにデータを表示するアコーディオンテーブルを使用します。データを隠し、フォームを表示するボタン「編集」があります。

フォームは別のvueにあります（フォームを外すために）。ボタンをクリックしたときにフォームが表示されていますが、フォームの中にajaxリクエストを呼び出す別のボタン「Save」があり、フォームを非表示にしますそのデータを示す。

私が抱えている問題は、最初のvueの変数を2番目のvueからどのように更新できるかわからないということです。私はstoreを使用することができましたが、これはオプションではなく、すべてのユーザーのために更新されますが、特定のユーザーに対してのみ更新する必要があります。

お問い合わせVUE：（HTML）

<tr v-if="row.id in expanded"> 
    <td :colspan="9" style="background-color: #F0FFFF;"> 
    <div class="accordian-body"> 
    <div v-if="editing != false"> 
     <enquiries-view-edit></enquiries-view-edit> 
     </div> 

    <div v-else> 
     <div class="container"> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-primary btn-md" @click="editing = !editing">Edit</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </td> 
</tr> 

Javascriptを：私が持っているEnquiriesVueインサイド

export default { 

     components: { 
      Multiselect 
     }, 

     data() { 
      return { 
       msg: 'This is just an estimation!', 
       tooltip: { 
        actual_price: 'Click on the price to edit it.' 
       }, 
       expanded: {}, 
       replacedCounter: 0, 
       theModel: [], 
       enquiry: [], 
       center: {lat: 53.068165, lng: -4.076803}, 
       markers: [], 
       needsAlerting: false, 
       editing: false 
      } 
     }, 
    } 

：

export default { 


    props: ['editing'], 

    computed: { 

     editing: function { 
      console.log("Computed the value"); 
     } 

    } 
} 

私は値を計算しようとしたが、これではありませんコンソールの中で何かをする。

EDIT：基本的に

、enquiries-view-editの内側に私はあなたがそれをクリックし、ボタンをしたい、とフォームの皮とデータVUEは、その後に示されるように、それはEnquiries VUE内の変数editingを更新します。

Answer 1

子コンポーネントは、イベントを発行してその親と通信できます。このように：

<button @click="onClick">Stop editing</button> 

あなたはその後、親コンポーネントからそのイベントに「聞く」ことができ、あなたが他のネイティブのイベントを同じように：

export default {   
    props: ['editing'],  
    methods: { 
     onClick: function { 
      console.log("Clicked on child!"); 
      this.$emit('stop-editing'); 
     }  
    } 
} 

これは、あなたの子コンポーネントのテンプレートでこのような何かを持っていると仮定し子コンポーネントを含めるときにハンドラを登録することにより、

<enquiries-view-edit @stop-editing="editing = !editing"></enquiries-view-edit> 

明らかにこれは非常に簡単な例です。より複雑なシナリオでは、放出されたイベントとともにデータを渡すこともできます。