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

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?

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}`"

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>

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

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

Juste utiliser

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

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>

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