Meine Vue-Komponente ist wie folgt:
<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>
Bei der Ausführung liegt ein Fehler wie der folgende vor:
Syntaxfehler der Vue-Vorlage:
id = "purchase - {{item.id}}": Die Interpolation innerhalb von Attributen wurde entfernt. Verwenden Sie stattdessen v-bind oder die Kurzform des Doppelpunkts.
Wie kann ich das lösen?
vue.js
vuejs2
vue-component
samuel toh
quelle
quelle
foo
, ist die v1-Syntax:my-object="{{ foo }}"
und die v2-Syntax:my-object="foo"
.<div>
Tag :<div :id="'purchase-id-' + item._id">
. Beispiel Rendering:<div id="purchase-id-5bb254557e1cef3b4cc40529">
class
und:class
für das gleiche Element. Vue.js führt die beiden Attribute zusammen. Siehe dort: jsfiddle.net/eywraw8t/466181 Oder wenn Sie nur verwenden möchten:class
: jsfiddle.net/eywraw8t/466183Wenn Sie Daten von einem Objekt und Bilder aus dem Ordner src / assets abrufen, müssen Sie require ('assets / path / image.jpeg') in Ihr Objekt aufnehmen, wie ich es unten getan habe.
Arbeitsbeispiel:
Nicht in Ihrem v-img-Element - Arbeiten Sie nicht
quelle
Verwenden Sie die V-Bind- oder Shortcut-Syntax ':', um das Attribut zu binden. Beispiel:
quelle
Benutz einfach
quelle
Am einfachsten ist es auch, die Dateiadresse zu benötigen :
<img v-bind:src="require('../image-address/' + image_name)" />
Das vollständige Beispiel unten zeigt ../assets/logo.png:
quelle
Die eleganteste Lösung ist das Speichern von Bildern außerhalb von Webpack. Standardmäßig komprimiert Webpack Bilder in base64. Wenn Sie also Bilder in Ihrem Assets-Ordner speichern, funktioniert dies nicht, da Webpack Bilder in base64 komprimiert und keine reaktive Variable ist.
Um Ihr Problem zu lösen, müssen Sie Ihre Bilder in Ihrem ÖFFENTLICHEN WEG speichern. Normalerweise befindet sich der öffentliche Pfad im Ordner "public" oder "statics".
Schließlich können Sie dies tun:
Und mit Ihrem HTML können Sie dies tun:
Wann soll der öffentliche Ordner verwendet werden?
WEITERE INFORMATIONEN: "HTML und statische Assets" in der Vue JS-Dokumentation
quelle