Vuejs2問題在兒童之間傳遞數據更改

我有以下vuejs2母子結構

父應用程序
- 兒童產品列表
  - 產品
    - 產品形象
    - 顏色選擇

內的產品模板，我開始同級組件

的colourSelect組件需要一個逗號分隔的字符串，並把它變成一個下拉列表。每當選定的選項發生變化時，它就會將顏色發回到具有「顏色」數據變量的產品組件

這似乎工作正常。

產品圖像組件將產品顏色作爲支柱。

每當顏色發生變化時，我希望產品圖像組件檢測它並觸發它獲取相關圖像。但它沒有檢測到顏色的變化。

Vue.component('product', { 
props: ['productID', 'images', 'product'], 
data: function() { 
    return { 
     colour: 'Navy', 
    } 
}, 
computed: { 
    returnColour: function (colour) { 
     // this.colour = colour 
     //return colour 
    } 
}, 
template: '<transition name="list"><li class="moving-item" id="productID">' + 
'<product-image :productID="productID" :images="getImage(product.productID)" :colour="colour"></product-image>' + 
'<colourSelect :colours="product.colour" :productID="product.productID" v-on:set-colour="setColour(colour)"></colourSelect>' + 
'</li></transition>', 
methods: { 
getImage: function (listItemId) { 
     var images = this.images.filter(function (item) { 
      return returnCleanedData(item.Products_x003a_ID) === listItemId 
     }) 

    }, 
    setColour: function (colour) { 
     console.log('in main colour emit') 

     this.colour = colour 
     console.log(this.colour) 
    } 

} 
}); 

Vue.component('colourSelect', { 
props: ['productID', 'colours', 'set-colour'], 
template: '<select v-bind:id="getID()" class="form-control input-xs" :disabled=" isActive" v-bind:class="{disabledSelect: isActive}" v-on:click="setColour(productID)">' + 
'<colourOption v-for="colourItem in colourArray">{{ colourItem.colour }}</colourOption>' + 
'</select>', 
data: function() { 
    return { 
     isActive: false 
    } 
}, 
computed: { 
    colourArray: function() { 
     //splits data and applies it to the select 

    } 

}, 
methods: { 
    getID: function() { 
     return 'colourSelect' + this.productID; 
    }, 
    **setColour: function (productID) {** 
     //yeah used jquery here 
     var colour = $('#colourSelect' + productID).val() 
     this.$emit('set-colour', colour) 
    } 
} 
}); 

Vue.component('product-image', { 
props: ['productID', 'images', 'colour'], 
template: '<p><slot></slot><img :src="getImage(productID, images, colourSelected)" class="productImagePosition img-responsive img-rounded"></img></p>', 
data: function() { 
    return { 
     isActive: false, 
     selectedColour: this.colour 
    } 
}, 
computed: { 
    colourSelected: function() { 
     console.log('colour change detected') 
     return this.colour 
    } 

}, 
methods: { 
    getID: function (test) { 
     return 'colourSelect' + this.productID; 
    }, 
    getImage: function (listItemId, images, colour) { 

     console.log('selected colour') 
     console.log(colour) 

     //filter images to the specific colour and return link 
    }, 
} 
});

問題出現在產品模板可能與該行

V系列：集彩色=「setColour（顏色）」

當子組件發出SET-顏色數據返回，產品正確運行此方法。但是產品形象沒有檢測到它的道具變化。

如果我將行更改爲v-on：set-color =「setColour（）」，它實際上會檢測產品圖像中的更改，但由於沒有傳遞數據而會發生錯誤。

在產品圖像組件中，我嘗試引用計算值（colourSelected）而不是模板中的prop，但沒有任何效果。

任何想法？

感謝

來源

2017-05-04 tachi

你不只是需要通過處理方法的名稱？ 'v-on：set-color =「setColour」'而不是調用它'v-on：set-color =「setColour（）」/ v-on：set-color =「setColour（color）」'？ – Doom5

如果我這樣做，第一次改變顏色下拉將成功地將顏色傳回到產品圖像。在下一次更改時，它會給出一個對象期望的錯誤 – tachi

函數anonymous（）{this（this）{return _c（'select'，{staticClass：「form-control input-xs」，class：{disabledSelect：isActive}， ATTRS：{ 「ID」：的getID（），「已禁用」：isActive}上：{ 「點擊」：函數（$事件）{** setColour（的productID）**}}} _ L（（colourArray），函數（colourItem）{return _c（'colourOption'，[_ v（_s（colourItem.colour））]））））} }' – tachi

在product-image觀察者添加到colour道具：

watch: { 
    colour(value) { 
     // make changes here 
    }, 
},

來源

2017-07-28 14:18:44 kimuraz

Vuejs2問題在兒童之間傳遞數據更改

回答

相關問題