Comment résoudre l'interpolation dans les attributs a été supprimée. Utilisez v-bind ou le raccourci des deux points? Vue.JS 2

Question

Mon composant vue est comme ceci:

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

Lorsqu'il est exécuté, il existe une erreur comme celle-ci:

Erreur de syntaxe du modèle Vue:

id = "achat - {{item.id}}": l'interpolation à l'intérieur des attributs a été supprimée. Utilisez plutôt v-bind ou le raccourci des deux points.

Comment puis-je le résoudre?

Answer 1

Utilisez du code javascript dans v-bind (ou raccourci ":"):

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

et

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

Ou si vous utilisez ES6 +:

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

Answer 2

Utilisez v-bind ou la syntaxe de raccourci ':' pour lier l'attribut. Exemple:

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