我们用按钮改变图像

Question

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"点击Answer按钮后，应该会将图像更改为item. image"

当前没有显示任何图像。我做错了什么?

Answer 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)不会返回任何类似的东西。