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

Question

写了一个很简单的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吗？
那应该如何写呢？

Answer 1

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