Comment résoudre l'Interpolation à l'intérieur d'attributs a été supprimé. Utiliser le v-lier ou le côlon sténo ? Vue.JS 2

Ma vue component 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 d'erreur comme ceci :

Vue du modèle d'erreur de syntaxe:

id="achat-{{ item.id }}": Interpolation à l'intérieur d'attributs a
été supprimé. Utiliser le v-lier ou le côlon d'abréviation à la place.

Comment puis-je le résoudre?

InformationsquelleAutor samuel toh | 2017-04-04
  1. 100

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

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

    et

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

    Ou si vous utilisez l'ES6+:

    :id="`purchase-${item.id}`"
    • Elle fonctionne. Merci beaucoup
    • Une idée de comment faire ce travail pour un objet, au lieu d'une chaîne de caractères?
    • il suffit de retirer les parenthèses: Si vous êtes à la liaison à un objet foo, v1 syntaxe serait :my-object="{{ foo }}" et v2 syntaxe serait :my-object="foo".
    • aussi id.literal="purchase-${item.id}" devrait fonctionner
    • avec le <div> tag: <div :id="'purchase-id-' + item._id">. Exemple de rendu: <div id="purchase-id-5bb254557e1cef3b4cc40529">
    • Que faire si vous voulez ajouter des attributs existants? E. g. ajouter des classes sans les écraser?
    • vous pouvez avoir class et :class pour le même élément. Vue.js la fusion des deux d'attribut. Voir là : jsfiddle.net/eywraw8t/466181 Ou si vous souhaitez utiliser uniquement les :class : jsfiddle.net/eywraw8t/466183

    InformationsquelleAutor Happyful
  2. 1

    Utiliser le v-lier ou raccourci syntaxe ':' pour lier l'attribut.
    Exemple:

    <input v-bind:placeholder="title">
<input :placeholder="title">
    • Mais quelqu'un Peut s'il vous plaît aidez-moi pourquoi nous ne pouvons pas utiliser l'espace réservé="{{ titre }}"
    • l'interpolation a été supprimé à partir d'attributs, il est utilisé uniquement à l'intérieur des éléments html maintenant
    InformationsquelleAutor Sibashrit Pattnaik
  3. 1

    Si vous êtes en tirant des images de la src/actifs dossier, vous devez inclure require('assets/path/image.jpeg') dans votre objet comme je l'ai fait ci-dessous.

    De travail exemple:

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

    Pas dans votre élément.

    InformationsquelleAutor Jason