如何解决“属性内的插值已被删除.使用 v-bind 或冒号简写"?Vue.js 2-前端问题

How can I solve quot;Interpolation inside attributes has been removed. Use v-bind or the colon shorthandquot;? Vue.js 2(如何解决“属性内的插值已被删除.使用 v-bind 或冒号简写?Vue.js 2)

本文介绍了如何解决“属性内的插值已被删除.使用 v-bind 或冒号简写"?Vue.js 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Vue.js 组件是这样的:

 <template>
...<div 类=面板主体"><一个角色=按钮"数据切换=折叠"；href=#purchase-{{ item.id }}"类=拉右"；aria-expanded=假"；aria-controls="collapseOne">展示</a></div>

执行时出现如下错误:

<块引用>Vue 模板语法错误:
id="purchase-{{ item.id }}": 内插属性有被移除.请改用 v-bind 或冒号简写.
我该如何解决?
 解决方案 
在 v-bind 中使用 JavaScript 代码(或快捷方式:"):
:href="'#purchase-' + item.id"
和
:id="'purchase-' + item.id"
或者如果使用 ES6 或更高版本:p>
:id="`purchase-${item.id}`"
My Vue.js component is like this:
    <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>
When executed, there exists an error like this:

Vue template syntax error:
id="purchase-{{ item.id }}": Interpolation inside attributes has
been removed. Use v-bind or the colon shorthand instead.
How can I solve it?
 解决方案 
Use JavaScript code inside v-bind (or shortcut ":"):
:href="'#purchase-' + item.id"
and
:id="'purchase-' + item.id"
Or if using ES6 or later:
:id="`purchase-${item.id}`"


                        
这篇关于如何解决“属性内的插值已被删除.使用 v-bind 或冒号简写"?Vue.js 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐