BootstrapVue中v-for循环内图片预览:src动态绑定失效问题

你当前的写法本质是把字符串拼接的结果直接赋值给了对应属性，并没有让Vue去读取实例上对应的同名变量，同时还有v-model、v-if两处相同逻辑的写法错误，具体问题和修复方案如下：

错误原因 #

• :src="'fileRequestSrc'+countTitle"：该写法最终只会给src绑定"fileRequestSrc1"这类纯字符串，不会读取你data里定义的fileRequestSrc1变量值。Vue模板中要动态访问实例上的属性，需要用括号语法：$data['fileRequestSrc' + countTitle]（data中定义的变量可通过$data访问）
• :v-model="'fileRequest'+countTitle"：两个错误，一是v-model本身就是双向绑定指令，不需要额外加:前缀；二是同样的字符串拼接逻辑不会绑定到对应变量，要改成v-model="$data['fileRequest' + countTitle]"
• v-if="'hasfileRequest'+countTitle"：该写法永远返回true，因为非空字符串在JS中都是真值，不会触发你定义的computed计算属性。计算属性挂载在实例this上，要改成v-if="this['hasfileRequest' + countTitle]"

修复后的模板代码 #

<template>
  <div>
    <div v-for="countTitle in 3" :key="countTitle">
      <b-button v-b-toggle="'request'+countTitle" variant="danger btn-block mb-2">Upload {{countTitle}}</b-button>
      <b-collapse :id="'request'+countTitle" class="mt-2">
        <div class="m-2 mt-3">
          <table class="table table-striped mt-2">
            <tbody>
              <div class="mt-3 mb-2 ml-1">Upload</div>
              <b-form-file v-model="$data['fileRequest' + countTitle]" placeholder="Upload ..." class="mb-2"></b-form-file>
              <b-img v-if="this['hasfileRequest' + countTitle]" :src="$data['fileRequestSrc' + countTitle]" class="mb-3" fluid block rounded></b-img>
            </tbody>
          </table>
        </div>
      </b-collapse>
    </div>
  </div>
</template>

优化建议（可选） #

如果后续上传模块数量可能变动，更推荐用数组存储上传文件相关数据，不需要单独定义N个变量、N个watch和computed，示例逻辑如下：

data() {
  return {
    // 3个上传位的初始化数据
    fileList: Array(3).fill().map(() => ({file: null, src: null}))
  }
},
watch: {
  fileList: {
    deep: true,
    handler(newVal) {
      newVal.forEach(async (item) => {
        if (item.file) {
          try {
            item.src = await base64Encode(item.file)
          } catch {
            item.src = null
          }
        } else {
          item.src = null
        }
      })
    }
  }
}

对应模板直接通过索引访问数组项即可，代码更简洁易维护。

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