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

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 ="purchase - {{item.id}}":已删除内部属性中的插值.改为使用v-bind或冒号.

我该如何解决？

Answer 1

在里面使用javascript代码v-bind(或快捷方式":"):

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

和

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

或者如果使用ES6 +:

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

Answer 2

只需使用

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

Answer 3

如果您从一组对象中提取数据，则需要像我在下面所做的那样在对象中包含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>

Answer 4

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

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