我的 Vue.js 组件是这样的:
<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.
我该如何解决?
最佳答案
在 v-bind
(或快捷方式“:”)中使用 JavaScript 代码:
:href="'#purchase-' + item.id"
和
:id="'purchase-' + item.id"
或者如果使用 ES6或以后:
:id="`purchase-${item.id}`"
关于vue.js - 我该如何解决 "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43211760/