title: How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2
body: <p>My Vue.js component is like this:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
          &lt;div&gt;
              &lt;div class=&quot;panel-group&quot; v-for=&quot;item in list&quot;&gt;
                  ...
                  &lt;div class=&quot;panel-body&quot;&gt;
                      &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; href=&quot;#purchase-{{ item.id }}&quot; class=&quot;pull-right&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseOne&quot;&gt;
                          Show
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;purchase-{{ item.id }}&quot; class=&quot;table-responsive panel-collapse collapse&quot; role=&quot;tabpanel&quot;&gt;
                  ...
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          export default {
              ...
              computed: {
                  list: function() {
                      return this.$store.state.transaction.list
                  },
                  ...
              }
          }
      &lt;/script&gt;
  </code></pre>
  <p>When executed, there exists an error like this:</p>
  <blockquote>
  <p>Vue template syntax error:</p>
  <p>id=&quot;purchase-{{ item.id }}&quot;: Interpolation inside attributes has
  been removed. Use v-bind or the colon shorthand instead.</p>
  </blockquote>
  <p>How can I solve it?</p>