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

Posted 2023-02-23

【中文标题】如何解决“属性内的插值已被删除。使用 v-bind 或冒号速记”？ Vue.js 2

【英文标题】：How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2

【发布时间】：2018-05-19 06:36:23

【问题描述】：

我的 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="purchase- item.id "：属性内的插值有 被移除。请改用 v-bind 或冒号简写。

我该如何解决？

【参考方案1】：

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

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

和

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

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

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

【讨论】：

知道如何使它适用于对象而不是字符串吗？

@MikedeKlerk 只需删除括号：如果您绑定到对象foo，v1 语法将是:my-object=" foo "，v2 语法将是:my-object="foo"。

带有<div> 标签：<div :id="'purchase-id-' + item._id">。渲染示例：<div id="purchase-id-5bb254557e1cef3b4cc40529">

如果要添加到现有属性怎么办？例如。追加一些类而不覆盖它们？

@AdamReis 对于同一个元素，您可以使用 class 和 :class。 Vue.js 将合并这两个属性。见那里：jsfiddle.net/eywraw8t/466181 或者如果你只想使用:class：jsfiddle.net/eywraw8t/466183

【参考方案2】：

如果您要从对象数组中提取数据，则需要在对象中包含 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>

【参考方案3】：

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

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

【讨论】：

但是谁能帮我解释一下为什么我们不能使用 placeholder=" title "

已从属性中删除插值，它现在只在 html 元素中使用

【参考方案4】：

随便用

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

【参考方案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>

【参考方案6】：

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

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

最后，你可以这样做：

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

而你的 HTML 你可以这样做：

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

何时使用公用文件夹

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

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