Vue点击按钮切换模态框图片无显示 代码哪里存在错误？

存在的问题 #

• 图片地址绑定错误：模板中<img :src="changeQuestion" />绑定的是布尔类型的changeQuestion变量，并非存储图片地址的计算属性，无法正常加载图片。
• 计算属性返回值错误：changeQuestionButton计算属性返回的是包裹了字符串的数组，且字符串引号将item.qimage/item.aimage转为了固定字面量，没有取到对应变量的实际图片地址。
• 按钮点击事件逻辑错误：changeQuestionButton是计算属性，默认只读，无法直接赋值修改，应该修改计算属性依赖的响应式变量changeQuestion来触发状态更新。

修正后代码 #

逻辑部分

const question = ref(false)
// 用于切换题目/答案图片的状态变量
const changeQuestion = ref(false)

const changeQuestionButton = computed(() => {
  // 直接返回对应图片地址，无需加引号和包裹数组
  return !changeQuestion.value ? item.qimage : item.aimage
})

// 切换回题目图片方法
const showQuestion = () => {
  changeQuestion.value = false
}
// 切换到答案图片方法
const showAnswer = () => {
  changeQuestion.value = true
}

模板部分

<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="changeQuestionButton" alt="内容图片" />
  </template>
  <template #action>
    <V-Button raised @click="showQuestion">Question</V-Button>
    <V-Button
      color="primary"
      @click="showAnswer"
      raised
      >Answer</V-Button
    >
  </template>
</V-Modal>

注：请确保item变量是已正确定义的响应式数据，qimage和aimage字段存储的是合法的图片地址。

内容的提问来源于stack exchange，提问作者Piyush Gehlot