Öznitelik içindeki enterpolasyon nasıl çözülür kaldırıldı. V-bind veya kolon kısayolu mı kullanıyorsunuz? Vue.JS 2

Question

Benim vue bileşeni şu şekildedir: çalıştırıldığında

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

böyle hata var mevcuttur:

Vue template syntax error:

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

bunu nasıl çözebilir?

Answer 1

kullanın v-bind (veya kısayol ":"): iç javascript kodu

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

ve

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

Ya kullanarak ES6 + eğer

:

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