如何解决“属性内的插值已被删除。使用 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如何解决“属性内的插值已被删除。使用 v-bind 或冒号速记”？ 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 或冒号简写。

我该如何解决？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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'" alt="HANGOUT PHOTO">

何时使用公用文件夹

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

【讨论】：