vuejs vue data vue.js vuejs2 vue-component

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