vue.js - data - vue templates
Cómo resolver La interpolación dentro de los atributos ha sido eliminada. ¿Usar v-bind o la taquigrafía de dos puntos? Vue.JS 2 (3)
Mi componente 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 plantilla Vue:
id = "compra - {{item.id}}": se ha eliminado la interpolación dentro de los atributos. Utilice v-bind o la taquigrafía de dos puntos en su lugar.
¿Cómo puedo resolverlo?
Si está extrayendo imágenes de la carpeta src / assets, debe incluir require (''assets / path / image.jpeg'') en su objeto como lo hice a continuación.
Ejemplo de trabajo:
people: [
{
name: "Name",
description: "Your Description.",
closeup: require("../assets/something/absolute-black/image.jpeg"),
},
No en tu elemento.
Use el código javascript dentro de
v-bind
(o acceso directo ":"):
:href="''#purchase-'' + item.id"
y
:id="''purchase-'' + item.id"
O si usa ES6 +:
:id="`purchase-${item.id}`"
Use v-bind o la sintaxis de acceso directo '':'' para vincular el atributo. Ejemplo:
<input v-bind:placeholder="title">
<input :placeholder="title">