Comment résoudre l'interpolation à l'intérieur des attributs a été supprimée. Utilisez v-bind ou le raccourci deux-points? Vue.JS 2

92

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?

Samuel Toh
la source

Réponses:

180

Utilisez le code javascript à l'intérieur v-bind(ou le raccourci ":"):

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

et

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

Ou si vous utilisez ES6 +:

:id="`purchase-${item.id}`"
Happyriwan
la source
Une idée comment faire fonctionner cela pour un objet, au lieu d'une chaîne?
Mike de Klerk
@MikedeKlerk supprime simplement les crochets: si vous liez à un objet foo, la syntaxe v1 serait :my-object="{{ foo }}"et la syntaxe v2 serait :my-object="foo".
merci
avec le <div>tag: <div :id="'purchase-id-' + item._id">. Exemple de rendu:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad
1
Et si vous souhaitez ajouter des attributs existants? Par exemple, ajouter des classes sans les écraser?
Adam Reis
3
@AdamReis vous pouvez avoir classet :classpour 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/466183
Happyriwan
5

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>
Jason
la source
3

Utilisez v-bind ou la syntaxe de raccourci «:» pour lier l'attribut. Exemple:

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
la source
Mais quelqu'un peut-il m'aider s'il vous plaît pourquoi nous ne pouvons pas utiliser placeholder = "{{title}}"
Sibashrit Pattnaik
l'interpolation a été supprimée des attributs, elle n'est utilisée que dans les éléments html maintenant
Radu Diță
2

Juste utiliser

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

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:

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

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

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:

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

Et votre HTML, vous pouvez le faire:

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

Quand utiliser le dossier public

  • Vous avez besoin d'un fichier avec un nom spécifique dans la sortie de construction
  • Le fichier dépend d'une variable réactive qui peut changer dans le temps d'exécution
  • Vous avez des images et devez référencer dynamiquement leurs chemins
  • Certaines bibliothèques peuvent être incompatibles avec Webpack et vous n'avez pas d'autre option que de les inclure comme balise.

PLUS D'INFORMATIONS: «HTML and Static Assets» dans la documentation Vue JS

Joan Galmés Riera
la source