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 = "purchase - {{item.id}}": l'interpolation à l'intérieur des attributs a été supprimée. Utilisez plutôt v-bind ou le raccourci deux-points.
Comment puis-je le résoudre?
vue.js
vuejs2
vue-component
Samuel Toh
la source
la source
foo
, la syntaxe v1 serait:my-object="{{ foo }}"
et la syntaxe v2 serait:my-object="foo"
.<div>
tag:<div :id="'purchase-id-' + item._id">
. Exemple de rendu:<div id="purchase-id-5bb254557e1cef3b4cc40529">
class
et:class
pour le même élément. Vue.js fusionnera les deux attributs. Voir ici: jsfiddle.net/eywraw8t/466181 Ou si vous souhaitez utiliser uniquement:class
: jsfiddle.net/eywraw8t/466183Si 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:
Pas dans votre élément v-img - Ne fonctionne pas
la source
Utilisez v-bind ou la syntaxe de raccourci «:» pour lier l'attribut. Exemple:
la source
Juste utiliser
la source
le moyen le plus simple est également d'exiger l' adresse du fichier :
<img v-bind:src="require('../image-address/' + image_name)" />
l'exemple complet ci-dessous montre ../assets/logo.png:
la source
La solution la plus élégante consiste à enregistrer les images en dehors de Webpack. Par défaut, Webpack compresse les images en base64, donc si vous enregistrez des images dans votre dossier de ressources, cela ne fonctionne pas car Webpack compressera les images en base64, et ce n'est PAS une variable réactive.
Pour résoudre votre problème, vous devez enregistrer vos images dans votre CHEMIN PUBLIC. Habituellement, le chemin public se trouve dans le dossier «public» ou «statique».
Enfin, vous pouvez faire ceci:
Et votre HTML, vous pouvez le faire:
Quand utiliser le dossier public
PLUS D'INFORMATIONS: «HTML and Static Assets» dans la documentation Vue JS
la source