Se ha eliminado Cómo resolver la interpolación dentro de los atributos. ¿Usa v-bind o la abreviatura de dos puntos? Vue.JS 2

100

Mi componente de vue es así:

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

Cuando se ejecuta, existe un error como este:

Error de sintaxis de la plantilla de Vue:

id = "compra - {{item.id}}": Se ha eliminado la interpolación dentro de los atributos. En su lugar, utilice v-bind o la abreviatura de dos puntos.

¿Cómo puedo resolverlo?

samuel toh
fuente

Respuestas:

189

Use código javascript dentro v-bind(o acceso directo ":"):

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

y

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

O si usa ES6 +:

:id="`purchase-${item.id}`"
Happyriwan
fuente
¿Alguna idea de cómo hacer que esto funcione para un objeto, en lugar de una cadena?
Mike de Klerk
@MikedeKlerk simplemente elimine los corchetes: si está vinculando a un objeto foo, la sintaxis v1 sería :my-object="{{ foo }}"y la sintaxis v2 sería :my-object="foo".
agradecido el
con la <div>etiqueta: <div :id="'purchase-id-' + item._id">. <div id="purchase-id-5bb254557e1cef3b4cc40529">
Representación de
1
¿Qué pasa si desea agregar atributos existentes? Por ejemplo, ¿agregar algunas clases sin sobrescribirlas?
Adam Reis
3
@AdamReis puede tener classy :classpara el mismo elemento. Vue.js fusionará los dos atributos. Ver allí: jsfiddle.net/eywraw8t/466181 O si solo desea usar :class: jsfiddle.net/eywraw8t/466183
Happyriwan
5

Si está extrayendo datos de un objeto e imágenes de la carpeta src / assets, debe incluir require ('assets / path / image.jpeg') en su objeto como hice a continuación.

Ejemplo de trabajo:

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

No en su elemento v-img - No funciona

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

Use v-bind o la sintaxis de acceso directo ':' para vincular el atributo. Ejemplo:

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
fuente
Pero por favor alguien puede ayudar por qué no podemos usar marcador de posición = "{{title}}"
Sibashrit Pattnaik
la interpolación se ha eliminado de los atributos, ahora solo se usa dentro de elementos html
Radu Diță
2

Solo usa

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

la forma más fácil es también requerir la dirección del archivo :

<img v-bind:src="require('../image-address/' + image_name)" />

El ejemplo completo a continuación muestra ../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
fuente
0

La solución más elegante es guardar imágenes fuera de Webpack. De forma predeterminada, Webpack comprime imágenes en base64, por lo que si guarda imágenes en su carpeta de activos, eso no funciona porque Webpack comprimirá imágenes en base64, y eso NO ES una variable reactiva.

Para resolver su problema, debe guardar sus imágenes en su RUTA PÚBLICA. Por lo general, la ruta pública se encuentra en una carpeta "pública" o "estática".

Finalmente, puede hacer esto:

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

Y tu HTML puedes hacer esto:

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

Cuándo usar la carpeta pública

  • Necesita un archivo con un nombre específico en el resultado de la compilación
  • El archivo depende de una variable reactiva que puede cambiar en el tiempo de ejecución
  • Tiene imágenes y necesita hacer referencia dinámicamente a sus rutas
  • Algunas bibliotecas pueden ser incompatibles con Webpack y no tiene otra opción que incluirlas como una etiqueta.

MÁS INFORMACIÓN: "HTML y activos estáticos" en la documentación de Vue JS

Joan Galmés Riera
fuente