问题描述
我是 VueJS 的新手,不幸的是我不知道如何更改此外部组件 vue-compare-two-images-component 的 :leftimage
和 :rightimage
道具。
它正在工作,然后道具值设置为 null
。但是如果 props 得到一个图像 src,它们就不会对新的值变化做出反应。
我的目标是根据按钮点击动态更改道具值。 有人知道如何实现这一目标吗?
<template>
<ClientOnly>
<img :src="imageBefore" >
<ul>
<li><button class="button is-primary" @click="Audi()">audi</button></li>
<li><button class="button is-primary" @click="Tesla()">tesla</button></li>
<li><button class="button is-primary" @click="Porsche()">porsche</button></li>
<li><button class="button is-primary" @click="reset()">resel all</button></li>
</ul>
<compare-two-images v-if="imageBefore"
:leftimage="imageBefore"
:rightimage="imageAfter">
</compare-two-images>
</ClientOnly>
</template>
export default {
name: 'Image Before-After',components: { CompareTwoImages },data () {
return {
imageBefore: null,// default null or some src
imageAfter: null,}
},methods: {
reset(){
this.imageBefore= null,this.imageAfter= null
},Audi(){
this.imageBefore = '/assets/audi-before.jpg',this.imageAfter = '/assets/audi-after.jpg'
},Tesla(){
this.imageBefore = '/assets/tesla-before.jpg',this.imageAfter = '/assets/tesla-after.jpg'
},Porsche(){
this.imageBefore = '/assets/porsche-before.jpg',this.imageAfter = '/assets/porsche-after.jpg'
}
}
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)