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

Posted 2023-02-23

【中文标题】关键依赖：依赖的请求是一个表达式，当使用 v-bind 时

【英文标题】：Critical dependency: the request of a dependency is an expression, when using v-bind

【发布时间】：2021-06-13 21:20:54

【问题描述】：

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

严重依赖：依赖的请求是一个表达式

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

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

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="require(skl)" class="card-img" >
      <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>

【参考方案1】：

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

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

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="skl" class="card-img" >
      <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>

【讨论】：

当我这样做时，它会将其视为依赖项并开始寻找“squirel”作为依赖项而不是所需的字符串。这当然会引发缺少的依赖错误。我希望“松鼠”最终成为作为道具传递的通用字符串。