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

Question

我的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或冒号速记。

我怎样才能解决它？

Answer 1

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

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

Answer 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>

Answer 3

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

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

和

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

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

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