Vue用按钮改变图像答案

【问题标题】：Vue change image with buttonVue用按钮改变图像
【发布时间】：2021-10-13 12:32:43
【问题描述】：

const question = ref(false)
const changeQuestion = ref(false)

const changeQuestionButton = computed(() => {
  if (!changeQuestion.value) {
    return ['item.qimage']
  } else {
    return ['item.aimage']
  }
})

<a @click="question = true" class="card-footer-item">Question</a>

                <V-Modal
                  :open="question"
                  :title="item.name"
                  size="big"
                  actions="center"
                  @close="question = false"
                >
                  <template #title>
                    <h3>{{ item.name }}</h3>
                  </template>
                  <template #content>
                    <img :src="changeQuestion" />
                  </template>
                  <template #action>
                    <V-Button raised>Question</V-Button>
                    <V-Button
                      color="primary"
                      @click="changeQuestionButton = true"
                      raised
                      >Answer</V-Button
                    >
                  </template>
                </V-Modal>

默认情况下，模式应显示“item.qimage”。单击“答案”按钮后，它应该将图像更改为“item.aimage”。

目前它没有显示任何图像。我做错了什么？

【问题讨论】：

我认为您在模板中混淆了changeQuestion 和changeQuestionButton

标签： image vue.js vuejs3

【解决方案1】：

在您提供的代码中，您将changeQuestion 用于您的图像的src：

<img :src="changeQuestion" />

但是在您的函数changeQuestionButton 中，您想要返回它所调用的图像的src，如引用的changeQuestionButton：

const changeQuestionButton = computed(() => { //
  if (!changeQuestion.value) {
    return ['item.qimage']
  } else {
    return ['item.aimage']
  }
})

所以src 不会得到任何类型的路径，因为changeQuestion 和const changeQuestion = ref(false) 不会返回类似的东西。

【讨论】：