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

90

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?

samuel toh
quelle

Antworten:

177

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}`"
Happyriwan
quelle
Irgendeine Idee, wie dies für ein Objekt anstelle einer Zeichenfolge funktioniert?
Mike de Klerk
@MikedeKlerk Entfernen Sie einfach die Klammern: Wenn Sie an ein Objekt binden foo, ist die v1-Syntax :my-object="{{ foo }}"und die v2-Syntax :my-object="foo".
Danke
mit dem <div>Tag : <div :id="'purchase-id-' + item._id">. Beispiel Rendering:<div id="purchase-id-5bb254557e1cef3b4cc40529">
Rprasad
1
Was ist, wenn Sie vorhandene Attribute hinzufügen möchten? ZB einige Klassen anhängen, ohne sie zu überschreiben?
Adam Reis
3
@AdamReis können Sie haben classund :classfü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/466183
Happyriwan
5

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>
Jason
quelle
3

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

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
quelle
Aber kann mir bitte jemand helfen, warum wir placeholder = "{{title}}" nicht verwenden können
Sibashrit Pattnaik
Die Interpolation wurde aus den Attributen entfernt und wird jetzt nur noch in HTML-Elementen verwendet
Radu Diță
2

Benutz einfach

:src="`img/profile/${item.photo}`"
Mahedi Hasan Durjoy
quelle
0

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>
Sina
quelle
0

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

Joan Galmés Riera
quelle