When executed, there exist error like this : Vue template syntax error: id=\"purchase-{{ item.id }}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. How can I solve it?","url":"https://ednsquare.com/question/getting-error-interpolation-inside-attributes-has-been-removed-use-v-bind-or-the-colon-shorthand-vue-js-2-0------gdN1WB","mainEntityOfPage":"https://ednsquare.com/question/getting-error-interpolation-inside-attributes-has-been-removed-use-v-bind-or-the-colon-shorthand-vue-js-2-0------gdN1WB","image":{"@type":"ImageObject","url":"https://cdn.ednsquare.com/s/*/d8e61c58-683f-4521-8ed9-7b873747514b.png"},"answerCount":2,"upvoteCount":6,"dateCreated":"2019-06-01T14:26:29.000Z","author":{"@type":"Person","name":"Prasad Patil","image":"https://cdn.ednsquare.com/s/*/f89a1717-2322-4d93-87a4-aba26711217e.jpeg","url":"https://ednsquare.com/@prasad"},"acceptedAnswer":{"@type":"Answer","text":"Use javascript code inside v-bind (or shortcut \":\") : :href=\"'#purchase-' + item.id\" and :id=\"'purchase-' + item.id\" Or if using ES6+: :id=\"`purchase-${item.id}`\"","dateCreated":"2019-06-01T14:27:35.000Z","upvoteCount":3,"url":"https://ednsquare.com/question/thread/f029078a-ea93-4c9f-ae44-d425bf489173","author":{"@type":"Person","name":"Sumit Sharma","image":"https://cdn.ednsquare.com/s/*/5f433358-b3c0-45fb-93f9-d2db352ba197.jpeg","url":"https://ednsquare.com/@sumit"}},"suggestedAnswer":[{"@type":"Answer","text":"Use v-bind or shortcut syntax ':' to bind the attribute. Example: ","dateCreated":"2019-06-01T14:29:20.000Z","upvoteCount":2,"url":"https://ednsquare.com/question/thread/f4af6c8c-28ea-404c-b615-ec9c20474ffa","author":{"@type":"Person","name":"Aditya Agrawal","image":"https://cdn.ednsquare.com/s/*/212a3510-ddb5-4aa4-8953-fb98c306dc6c.jpeg","url":"https://ednsquare.com/@aditya"}}]}}Ednsquare

Getting Error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand. Vue.JS 2.0

My vue component is like this :
<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>

When executed, there exist error like this :
Vue template syntax error: id="purchase-{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

How can I solve it?

Write your answer...

Never miss a post from Prasad Patil, when you sign up for Ednsquare.