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

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?

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

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>

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

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

Solo usa

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

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>

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