如何解决属性内插法已删除。使用v-bind或冒号速记？Vue.JS 2

我的Vue组件是这样的：

    <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模板语法错误：

id =“ purchase-{{item.id}}”“：属性内插已删除。请使用v-bind或冒号速记。

我该如何解决？

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

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

和

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

或者，如果使用ES6 +：

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

如果要从对象中提取数据，并且要从src / assets文件夹中提取图像，则需要像在下面那样在对象中包含require（'assets / path / image.jpeg'）。

工作示例：

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

不在您的v-img元素中-不起作用

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

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

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

只需使用

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

最简单的方法也是要求文件地址：

<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>

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

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

最后，您可以执行以下操作：

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

而您的HTML您可以执行以下操作：

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

何时使用公用文件夹

• 您需要在构建输出中使用特定名称的文件
• 文件取决于可更改执行时间的反应变量
• 您有图片，需要动态引用其路径
• 某些库可能与Webpack不兼容，您别无选择，只能将其作为标签包含在内。

更多信息：Vue JS文档中的“ HTML和静态资产”