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

我的 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 或冒号简写。

我该如何解决？

里面使用JavaScript代码v-bind（或快捷方式“：”）：

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

and

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

或者如果使用ES6 https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015或稍后：

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