javascript - vue 组件使用:class为什么会报invalid expression

问题描述

问 题

写了一个很简单的table的组件

var printer_data = {
    printers: [],
    check_item: null,
    header_names: [{name:"序号",width:"5%"},{name:"打印机",width:"85%"},{name:"设置",width:"10%"}]
};
Vue.component('printer', {
    template: '<table class="t-table"><thead><tr><th v-for="header in header_names" :width="header.width">{{ header.name }}</th></tr></thead><tbody><tr v-for="(printer, index) in printers" @click="d_click(index)" :class="{ list-active: index == check_item }" ><th>{{index+1}}</th><th>{{printer.name}}</th><th>{{printer.default_printer}}</th></tr></tbody>',
    data: function () {
        return printer_data;
    },
    methods:{
        d_click:function(index){
            printer_data.check_item = index;
        }
    }
});

使用的时候会报

vue.js:525 [Vue warn]: failed to compile template:
- invalid expression: :class="{ list-active: index == check_item }"

在组件中不能这样使用class吗？
那应该如何写呢？

解决方案

list-active 要用单引号包裹一下

这篇关于javascript - vue 组件使用:class为什么会报invalid expression的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！