我的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模板语法错误:

id="purchase-{item.id}}":属性内部的插值

我该怎么解决呢?

推荐答案

v-bind(或快捷方式)中使用JavaScript代码:

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

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

或者如果使用ES6或更高版本:

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

Vue.js相关问答推荐

如何在 vue2.7 中删除 slot-scope

Vuejs - 更新数组中对象的数组

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

将函数作为属性传递给 Vue 组件

vue 模板中无法识别 pug 语言

实现登录命令并访问 vuex 存储

如何在 Vue 中编译从外部 api 加载的模板

如何将Vue的主应用程序渲染到body元素?

为什么 CSS 关键帧动画在具有范围样式的 Vue 组件中被 destruct ?

单击链接会更改 url,但不会更改页面上的内容/数据

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

Vue 3 - 带有全局组件的无法解析组件

更新 vue.js 中的数据属性/对象

v-if inside v-for - 在两列中显示项目列表

在 .vue 文件中使用 Vue.set() 和 Vue.use()

Vuex 存储数据总是驻留在内存中?

vuejs 配置:使用全局变量?

VueJS 2 + ASP.NET MVC 5

v-bind:class 的 Vue.js 计算(computed)属性

超过最大调用堆栈大小 Vuetify