Question

我正在处理的项目的另一个问题。

我有以下vuejs2父子结构

家长应用
- 儿童产品清单
  - 产物
    - 产物的图像
    - 色选

在产品模板中，我启动了兄弟组件

colourSelect组件采用逗号分隔的字符串并将其转换为下拉列表。每当所选选项发生更改时，它会将颜色发送回具有数据变量“color”

的产品组件

这似乎工作正常。

产品图像组件将产品颜色作为道具。

每当颜色发生变化时，我都希望产品图像组件检测到它并触发它以获取相关图像。但它没有检测到颜色的变化。

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（颜色）”

当子组件发回设置颜色数据时，产品正在运行此方法。但产品图像并未检测到其支柱的变化。

如果我将线路更改为v-on：set-color =“setColour（）”它将实际检测到产品图像中的更改，但由于没有传递数据而会出错。

在product-image组件中，我尝试引用计算值（colourSelected）而不是模板中的prop，它没有效果。

有什么想法吗？

由于

Answer 1

在product-image上向colour道具添加观察者：

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

Vuejs2问题在子

1 个答案: