我该如何解决"Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"？ Vue.js 2

Question

我的Vue.js组件是这样的：

    <template>
        <div>
            <div class="panel-group" v-for="item in list">
                ...
                <div class="panel-body">
                    <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                        Show
                    </a>
                </div>
                <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
                ...
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    </script>

执行时出现如下错误：

Vue template syntax error:

id="purchase-{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

我该如何解决？

Answer 1

在 v-bind 中使用 JavaScript 代码（或快捷方式“:”）：

:href="'#purchase-' + item.id"

和

:id="'purchase-' + item.id"

或者如果使用 ES6 或更高版本：

:id="`purchase-${item.id}`"

Answer 2

使用 v-bind 或快捷语法“:”来绑定属性。示例：

<input v-bind:placeholder="title">
<input :placeholder="title">

Answer 3

如果您要从对象数组中提取数据，则需要像下面那样在对象中包含 require('assets/path/image.jpeg')。

工作示例：

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

在 v-img 元素中使用 require(objectName.propName.urlPath) 对我不起作用。

<v-img :src="require(people.closeup.urlPath)"></v-img>

Answer 4

就用

:src="`img/profile/${item.photo}`"

Answer 5

最简单的方法也是需要文件地址:

<img v-bind:src="require('../image-address/' + image_name)" />

下面的完整示例显示 ../assets/logo.png:

<template>
    <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
  export default {
    name: "component_name",
    data: function() {
      return {
        img: "logo.png"
      };
    }
  };
</script>

Answer 6

最优雅的解决方案是将图像保存在 Webpack 之外。默认情况下，Webpack 以 Base64 压缩图像，因此如果您将图像保存在 assets 文件夹中，那将不起作用，因为 Webpack 将以 base64 压缩图像，而不是反应变量。

要解决您的问题，您需要将图像保存在 public 路径 中。通常 public 路径在“public”文件夹或“statics”中。

最后，你可以这样做：

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

而你的 HTML 你可以这样做：

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

何时使用 public 文件夹

您需要一个在构建输出中具有特定名称的文件
文件依赖于一个可以在执行时间改变的反应变量
您有图片并且需要动态引用它们的路径
某些库可能与 Webpack 不兼容，您别无选择，只能将其包含为

我该如何解决"Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"？ Vue.js 2

How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2

vue.js

vue-component

vuejs2