VueのJS - 更新インデックスの値が第2のコンポーネントのビュー

を更新しません、私は以下のように、この非常に簡単Vueのjsのページを持っている： - テーブルと入力フォームVueのJS - 更新インデックスの値が第2のコンポーネントのビュー

<html> 
    <head> 
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    </head> 
    <body> 
     <div id="main-container"> 
      <div id="contact-table"> 
       <table> 
        <thead> 
         <tr> 
          <th>Contact Name</th> 
          <th>Email</th> 
         </tr> 
        </thead> 
        <tbody v-for="contact in contacts"> 
         <tr v-on:click="selectContact(contact.index)"> 
          <td> 
           {{contact.name}} 
          </td> 
          <td> 
           {{contact.email}} 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div id="contact-form"> 
       <input type="text" v-model="contactName"/> 
       <input type="text" v-model="contactEmail"/> 
       <button type="button" v-on:click="updateContact">Update Contact</button> 
      </div> 
     </div> 
    </body> 
    <script> 
     var hub = { 
      contacts: [ 
       { 
        name: "James", 
        email: "[email protected]", 
        index: 0 
       }, 
       { 
        name: "Mary", 
        email: "[email protected]", 
        index: 1 
       } 
      ], 
      index: 0 
     }; 

     var contactTable = new Vue({ 
      el: "#contact-table", 
      data: { 
       contacts: hub.contacts 
      }, 
      methods: { 
       selectContact: function(index) { 
        hub.index = index; 
        console.log(hub.index); 
       } 
      } 
     }); 

     var contactForm = new Vue({ 
      el: "#contact-form", 
      data: { 
       contactName: hub.contacts[hub.index].name, 
       contactEmail: hub.contacts[hub.index].email 
      }, 
      methods: { 
       updateContact: function() { 
        hub.contacts[hub.index].name = this.contactName; 
        hub.contacts[hub.index].email = this.contactEmail; 
       } 
      } 
     }); 
    </script> 
</html>

基本的には2つのVueの部品が含まれています。表の行をクリックすると、入力フォームの値が変更されますが、「連絡先を更新」ボタンをクリックすると、フォームの詳細が更新されます。

2番目の部分はうまくいきますが、テーブルの行をクリックすると、hub.indexはうまく更新されていますが、入力フォームのビューは表示されません。

私はこれが双方向バインディングであるべきだと思うので、ここでどこが間違っているのか不思議です。

出典

2017-01-23 Lance Shi

[イベントバス]（https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication）や[状態管理パターン]（https ：//vuejs.org/v2/guide/state-management.html） – Phil

ハブ変数がvueインスタンスの外側にあるため、この変数は無効ではありません。つまり、この変数変更vueでDOMが更新されない場合です。 vueのデータ部分にhubを定義し、それを無効にすることもできます。

between your two componentsと通信する場合はイベントバスが必要です。$emitを使用してイベントを送信し、$onを使用して他のコンポーネントのコンポーネントを聞くことができます。ここで

はあなたのコードの作業フィドルです：https://jsfiddle.net/mimani/50ajs58L/1/ここ

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

<body> 
    <div id="main-container"> 
    <div id="contact-table"> 
     <table> 
     <thead> 
      <tr> 
      <th>Contact Name</th> 
      <th>Email</th> 
      </tr> 
     </thead> 
     <tbody v-for="(contact, index) in contacts"> 
      <tr v-on:click="selectContact(index)"> 
      <td> 
       {{contact.name}} 
      </td> 
      <td> 
       {{contact.email}} 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    <div id="contact-form"> 
     <input type="text" v-model="contactName" /> 
     <input type="text" v-model="contactEmail" /> 
     <button type="button" v-on:click="updateContact">Update Contact</button> 
    </div> 
    </div> 
</body> 
<script> 
    var hub = { 
    contacts: [{ 
     name: "James", 
     email: "[email protected]", 
     index: 0 
    }, { 
     name: "Mary", 
     email: "[email protected]", 
     index: 1 
    }], 
    index: 0 
    }; 
    var bus = new Vue() 
    var contactTable = new Vue({ 
    el: "#contact-table", 
    data: { 
     contacts: hub.contacts 
    }, 
    methods: { 
     selectContact: function(index) { 
     hub.index = index; 
     console.log(hub.index); 
     bus.$emit('updateIndex', index) 
     } 
    } 
    }); 

    var contactForm = new Vue({ 
    el: "#contact-form", 
    data: { 
     contactName: hub.contacts[hub.index].name, 
     contactEmail: hub.contacts[hub.index].email, 
     index: hub.index 
    }, 
    methods: { 
     updateContact: function() { 
     hub.contacts[this.index].name = this.contactName; 
     hub.contacts[this.index].email = this.contactEmail; 
     } 
    }, 
    created() { 
     var that = this 
     bus.$on('updateIndex', function(index) { 
     that.index = index 
     that.contactName = hub.contacts[that.index].name 
     that.contactEmail = hub.contacts[that.index].email 
     }) 
    } 
    }); 

</script>

私はイベントバスを使用していたが、あなたのアプリケーションが大きくなるにつれて、あなたはあなたのすべてにアクセス可能な変数を与えるstate management技術を使用して考えることができますコンポーネント間で共有するか、コミュニティ間で普及しているvuexを使用することができます。詳細についてはthisとthisの回答をご覧ください。

出典

2017-01-23 05:55:58 Saurabh

アプリが複雑な場合は、** vuex **を絶対にお勧めします。単純なケースでは、データストアを手動で維持するだけで十分です。しかし、このような簡単な例で複数のVueインスタンスを作成すると、奇妙なように見えます。私は行動を取る前に公式のドキュメントと例を読むためにOPを提案する:) – Leo

@Leoその情報をありがとう。私はまだ行動を起こしていないし、このページは学習目的のためのものです。 Vue jsはかなりクールで、私はVue jsのやり方を考えようとしています。 –

VueのJS - 更新インデックスの値が第2のコンポーネントのビュー

答えて

関連する問題