[解決済み] 属性内の補間が削除されました。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 (またはショートカット ":")の中にJavaScriptのコードを記述してください。

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

と

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

また ES6 またはそれ以降を使用している場合は

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