Question

我的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 =＆＃34; purchase - {{item.id}}＆＃34;：内部属性的插值有   被删除了。改为使用v-bind或冒号。

我该如何解决？

Answer 1

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

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

和

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

或者如果使用ES6 +：

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

Answer 2

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

工作示例：

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

不在您的元素中。

Answer 3

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

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

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中压缩图像，因此，如果将图像保存在资产文件夹中，则不会起作用，因为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不兼容，您别无选择，只能将其包含为标签。

更多信息："HTML and Static Assets" in Vue JS documentation

如何解决内部属性中的插值已被删除。使用v-bind还是结肠速记？ Vue.JS 2

6 个答案: