Vue公司JS - 更新索引值不更新第二組件的視圖

我有這個非常簡單的Vue JS頁面如下：Vue公司JS - 更新索引值不更新第二組件的視圖

<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>

基本上它包含兩個部分Vue公司 - 表和輸入表單。通過單擊表中的行，它應該更改輸入表單中的值，但單擊更新聯繫人按鈕它應更新表單詳細信息。

第二部分運行良好 - 但是，當我單擊表的行時，儘管console.log告訴我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 - 更新索引值不更新第二組件的視圖

回答

相關問題