गुणों के अंदर इंटरपोलेशन को हल करने के लिए कैसे हटा दिया गया है। वी-बाइंड या कोलन शॉर्टेंड का प्रयोग करें? Vue.JS 2

Question

मेरे Vue घटक इस तरह है:

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

जब मार डाला, वहाँ इस तरह त्रुटि मौजूद हैं:

Vue template syntax error:

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

मैं इसे कैसे हल कर सकते हैं?

Answer 1

उपयोग जावास्क्रिप्ट कोड के अंदर v-bind (या शॉर्टकट ":"):

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

और

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

या यदि का उपयोग कर ES6 +:

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