Jak rozwiązać Interpolacja w atrybutach została usunięta. Użyj v-bind lub skrótów dwukropka? Vue.JS 2

Question

Mój składnik vue jest tak:

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

Po wykonaniu istnieje błąd tak:

Vue template syntax error:

id="purchase-{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

Jak mogę go rozwiązać?

Answer 1

użycie kodu JavaScript wewnątrz v-bind (lub skrót ":"):

:href="'#purchase-' + item.id" 

i

:id="'purchase-' + item.id" 

Albo jeśli używasz ES6 +:

:id="`purchase-${item.id}`"