Das Lösen der Interpolation innerhalb von Attributen wurde entfernt. Verwenden Sie v-bind oder die Kurzform des Doppelpunkts? Vue.JS 2

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?

Verwenden Sie Javascript-Code v-bind(oder Verknüpfung ":"):

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

und

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

Oder wenn Sie ES6 + verwenden:

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

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

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

Nicht in Ihrem v-img-Element - Arbeiten Sie nicht

<v-img :src="require(people.closeup)"></v-img>

Verwenden Sie die V-Bind- oder Shortcut-Syntax ':', um das Attribut zu binden. Beispiel:

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

Benutz einfach

:src="`img/profile/${item.photo}`"

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:

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  name: "component_name",
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>

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:

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

Und mit Ihrem HTML können Sie dies tun:

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

Wann soll der öffentliche Ordner verwendet werden?

• Sie benötigen eine Datei mit einem bestimmten Namen in der Build-Ausgabe
• Die Datei hängt von einer reaktiven Variablen ab, deren Ausführungszeit sich ändern kann
• Sie haben Bilder und müssen ihre Pfade dynamisch referenzieren
• Einige Bibliotheken sind möglicherweise nicht mit Webpack kompatibel, und Sie haben keine andere Möglichkeit, als sie als Tag einzuschließen.

WEITERE INFORMATIONEN: "HTML und statische Assets" in der Vue JS-Dokumentation