如何在Vue js（Nuxt）中单击时在2张图像之间切换？

Question

我正在使用Nuxt js，并且有2张图片。当我单击第一个图像时，它应更改为第二个图像，而当我单击第二个图像时，应更改为第一个图像，依此类推。

这是我到目前为止所拥有的。我在图像的srcs之间切换，如下所示：

<template>
<img id="test" src="../assets/menu.svg" @click="change" />
</template>

<script>
change(): any {
    const img1 = '../assets/menu.svg';
    const img2 = '../assets/cross.svg';
    const imgElement = document.getElementById('test');
    imgElement.src = imgElement.src === img1 ? img2 : img1;   <-- I think this is the problem
  }
</script>

该行的错误：Object is possibly null.

希望得到一些帮助。谢谢！

Answer 1

您应该能够通过计算属性来执行此操作：

<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>

如果我没记错的话，如果具有动态src，则可能必须使用require：require('~/assets/menu.svg')