Vuejs2问题在儿童之间传递数据更改

问题描述：

我正在处理的项目的另一个问题。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，但没有任何效果。

任何想法？

感谢

你不只是需要通过处理方法的名称？ '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 
    }, 
},

Vuejs2问题在儿童之间传递数据更改

相关推荐