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>
Une fois exécuté, il existe une erreur comme celle-ci:
Erreur de syntaxe du modèle Vue:
id = "achat - {{item.id}}": l'interpolation dans les attributs a été enlevé. Utilisez plutôt v-bind ou le raccourci des deux points.
Comment puis-je le résoudre?
Utilisez le code javascript dans v-bind
(ou le raccourci ":"):
:href="'#purchase-' + item.id"
et
:id="'purchase-' + item.id"
Ou si vous utilisez ES6 +:
:id="`purchase-${item.id}`"
Si vous extrayez des données d'un objet et des images du dossier src/assets, vous devez inclure require ('assets/path/image.jpeg') dans votre objet comme je l'ai fait ci-dessous.
Exemple de travail:
people: [
{
name: "Name",
description: "Your Description.",
closeup: require("../assets/something/absolute-black/image.jpeg"),
},
Pas dans votre élément v-img - ne fonctionne pas
<v-img :src="require(people.closeup)"></v-img>
Utilisez v-bind ou la syntaxe de raccourci ':' pour lier l'attribut . Exemple:
<input v-bind:placeholder="title">
<input :placeholder="title">