如何解决“内部插值属性已被删除。使用 v-bind 或冒号速记”? Vue.js2

我的 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 模板语法错误:

Id = “ buy-{ item.id }}”: 属性内部的插值具有 使用 v-bind 或冒号代替。

我该怎么解决呢？

66158 次浏览
小开
最佳答案

在 v-bind中使用 JavaScript 代码(或快捷方式“ :”) :

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

还有

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

如果使用 ES6或更高版本:

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

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

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

如果要从对象数组中提取数据，则需要像下面一样在对象中包含 要求(‘ asset/path/image. jpeg’)。

实例:

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

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

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

用就是了

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

最简单的方法也是要求 档案地址:

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

下面的完整示例显示了 . ./asset/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 压缩 基地64中的图像，所以如果您将图像保存在资产文件夹中，这是不可行的，因为 Webpack 将压缩 base64中的图像，而 不是是一个反应变量。

为了解决您的问题，您需要保存您的图像在您的 公共道路。通常公共路径位于“ public”文件夹或“ static”中。

最后，你可以这样做:

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

你的 HTML 可以这样做:

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

何时使用公用文件夹

  • 您需要在生成输出中包含特定名称的文件
  • 文件依赖于可以在执行时间中更改的反应变量
  • 您有图像并且需要动态引用它们的路径
  • 有些库可能与 Webpack 不兼容，您别无选择，只能将其包含为一个 < script > 标记。

更多信息: < a href = “ https://cli.vuejs.org/guide/HTML-and-Static-Assets.HTML # the-public-file”rel = “ nofollow norefrer”> Vue.js 文档中的“ HTML 和静态资产”


提交答案