[Vuejs]-How can I switch between 2 images on click in Vue js(Nuxt)?

by

4👍

✅

You should be able to do this with a computed property:

<template>
<img id="test" :src="imgSrc" @click="imgClicked = !imgClicked" />
</template>

<script>
  data () {
    return {
      imgClicked: false
    }
  },
  computed: {
    imgSrc: function () {
      return this.imgClicked ? '../assets/menu.svg' : '../assets/cross.svg'
    }
  }
</script>

If I remember correctly, you might have to use require if have a dynamic src: require('~/assets/menu.svg')

👤RobbeVP

Leave a comment