属性内の補間を解決する方法が削除されました。v-bindを使うか、コロンの省略記法 ?Vue.JS 2

私の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かコロンのショートハンドレートを使ってください。

どうすれば解決できますか？

simon04
編集された質問 12日 12月 2017 в 3:17
プログラミング
vue.js vuejs2 vue-component
4日 4月 2017 в 3:38
まだビューはありません
ソリューション

v-bind` 内の javascript コード（またはショートカット ":"）を使用します。

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

と

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

または、ES6+を使用している場合。

:id="`purchase-${item.id}`"
trusktr
編集した答え 18日 9月 2017 в 8:20
解説 (6)

もし、データをオブジェクトから、画像をsrc/assetsフォルダから取得する場合は、以下のようにオブジェクトに require('assets/path/image.jpeg') を記述する必要があります。

**動作例

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

v-img要素にない場合 -- Don't work.

Jason
編集した答え 31日 8月 2019 в 3:45
解説 (0)

属性を結合するには、v-bind またはショートカット構文 ':' を使用します。 例

<input v-bind:placeholder="title">
<input :placeholder="title">
解説 (2)