关键依赖：一个依赖的请求是一个表达式，使用v-bind时

如何解决关键依赖：一个依赖的请求是一个表达式，使用v-bind时

我正在尝试使用道具作为图像源。尽管当我使用 v-bind 调用 prop 或脚本中的任何对象时，终端会抛出错误

关键依赖：依赖的请求是一个表达式

并且网页完全空白。除了 app.vue 上的内容。

这里是代码供参考。我使用静态变量和通用字符串进行测试，但使用 prop 得到了相同的结果。最终目标是什么

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="require(skl)" class="card-img" alt="image unavailable">
      <div class="card-img-overlay">
        <h5 class="card-title">{{title_of}}</h5>
        <p class="card-text">{{body}}</p>
        <p class="card-text">{{timestamp}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeListing',props: {
    src: String,title_of: String,body: String,timestamp: String
  },data: function () {
    return {
      skl: 'squirel'
    }
  }
}
</script>

<style scoped>

</style>

解决方法

你有正确的方法！只需要稍作改动： 您需要将 required() 放入数据部分，而不是模板部分。

像这样 - squirel 似乎是图像（顺便说一句，它拼写为“松鼠”）：

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="skl" class="card-img" alt="image unavailable">
      <div class="card-img-overlay">
        <h5 class="card-title">{{title_of}}</h5>
        <p class="card-text">{{body}}</p>
        <p class="card-text">{{timestamp}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeListing',props: {
    src: String,title_of: String,body: String,timestamp: String
  },data: function () {
    return {
      skl: require('squirel')
    }
  }
}
</script>