Vuejs - 如何溝通範圍內插槽中父和子之間的變化

我試圖創建一個有兩個插槽的組件。第二個插槽基於第一個插槽中的項目數重複。我已經使用範圍插槽實現了這一點，但是，當數據在第一個插槽上更新時，第二個插槽不會自動更新它，直到觸發事件，例如：單擊調用方法的按鈕。Vuejs - 如何溝通範圍內插槽中父和子之間的變化

當數據在第一個插槽上更改時，是否有辦法讓第二個插槽更新其視圖？

這裏是我有例如：

的jsfiddle：https://jsfiddle.net/89vykm75/1/

new Vue({ 
 
\t el: '#app', 
 
    components: { 
 
    \t 'repeat-for-each-item': { 
 
     data: function() { 
 
      return { 
 
       items: [] 
 
      } 
 
     }, 
 
    \t template: `<div> 
 
      <slot name="item" v-for="item in items" :item="item"></slot> 
 
      <button @click="addItem()">Add item</button> 
 
      <slot name="repeat" v-for="item in items" :item="item"></slot> 
 
     </div> 
 
     `, 
 
     methods: { 
 
     addItem() { 
 
      this.items.push({}); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<div id="app"> 
 
    <repeat-for-each-item> 
 
    <template slot="item" scope="props"> 
 
     <div> 
 
     <input type="text" v-model="props.item.name"> 
 
     </div> 
 
    </template> 
 
    
 
    <template slot="repeat" scope="props"> 
 
     <div> 
 
     <label> 
 
      <span v-if="props.item.name">{{props.item.name}}:</span> 
 
      <span v-else>No Name:</span> 
 
     </label> 
 
     <input type="text"> 
 
     </div> 
 
    </template> 
 
    </repeat-for-each-item> 
 
</div>

來源

2017-05-02 Adrian Gunawan

您正在進入Vue change detection caveat。這裏的問題是，如果您將屬性添加到對象添加到Vue數據之前不存在的對象，則Vue無法檢測到更改。這裏的問題是：

this.items.push({})

你沒有屬性添加對象，然後綁定v-model到該對象，不存在的name財產。 Vue無法檢測到更改，並且不更新綁定到該屬性的其他項目。

如果不是這樣做：

this.items.push({name: null})

你會發現你的代碼工作。這是更新的fiddle。

來源

2017-05-02 15:30:26 Bert

這很好，非常感謝！我還有很多要學習:) –

我找到了解決方案通過調用KEYUP的方法。

基本上，我加入@keyup事件上的插槽

<input type="text" v-model="props.item.name" @keyup="props.onchange()">

而關於分量模板，通於平變化的方法來槽

<slot name="item" v-for="item in items" :item="item" :onchange="onchange"></slot>

然後有平變化函數力重新渲染

onchange:() => { 
    // hack to trigger changes 
    this.$set(this.items, 0, this.items[0]); 
}

這裏是完整的工作JsFiddle：https://jsfiddle.net/89vykm75/2/

我想知道是否有更清潔的解決方案？

來源

2017-05-02 10:48:15

Vuejs - 如何溝通範圍內插槽中父和子之間的變化

回答

相關問題