2

I'm new to VueJS and unfortunately I can't figure out how to change the :leftImage and :rightImage props of this external component vue-compare-two-images-component. It's working then the props values are set to null. But if the props get a image src they not react to new value change.

My goal is to change the props value dynamically based on the button click. Does someone knows how to achieve this?

<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>
nieksu
  • 21
  • 3
  • It should work. What's the issue? Are you able to see the images? Or its not changing images dynamically?? – Beshambher Chaukhwan Feb 25 '21 at 14:09
  • I can't change the images / props dynamically. It only works for but not for . The only thing that works is the reset button that set the prop values to null. – nieksu Feb 25 '21 at 14:16
  • 1
    Then call reset function in each function before setting image paths. So in each button click first image will be null then it will be set to Audi or tesla or anything. – Beshambher Chaukhwan Feb 25 '21 at 14:21
  • 2
    Also try adding :key="imageBefore" for reactivity – Beshambher Chaukhwan Feb 25 '21 at 14:22
  • 1
    Hey @BeshambherChaukhwan thank you for your help. The :key prop solved my problem. Maybe someone knew a other way to code this efficient. – nieksu Feb 25 '21 at 14:40
  • 1
    Then I think the reactivity was the issue. Do study more about it in here https://michaelnthiessen.com/force-re-render/ – Beshambher Chaukhwan Feb 25 '21 at 14:54
  • 1
    you should remove the commas in your functions also you have to declare your properties in your Child component. Could you show use your CompareTwoImages.vue file? – wittgenstein Feb 25 '21 at 15:37

0 Answers0