从Vue js中的动态类名称获取Element

<v-data-table
:headers="menuheaders"
//this menus from api response
    :items="menus"
        item-key="usersmenu_menuid"
        items-per-page="1000"
        hide-default-footer=""
        class="elevation-1"
        >
            <template v-slot:item.usersmenu_read="{ item }">
                <v-checkbox :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_edit="{ item }">
                <v-checkbox :class="`edit${item.usersmenu_edit}`" :value="item.usersmenu_edit === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_add="{ item }">
                <v-checkbox :class="`add${item.usersmenu_add}`" :value="item.usersmenu_add === 1 ? true : false "></v-checkbox>
            </template>
            <template v-slot:item.usersmenu_delete="{ item }">
                <v-checkbox :class="`delete${item.usersmenu_delete}`" :value="item.usersmenu_delete === 1 ? true : false "></v-checkbox>
            </template>
        </v-data-table>

大家好,我对此代码有疑问,我想要getElementsByClassName

let read =  document.getElementsByClassName('read${usersmenu_read}')

但是我不知道我必须填写什么标志。

let read =  document.getElementsByClassName(In this flag, What should i fill ?)

请给我一些解释。谢谢大家

评论
  • sest
    sest 回复

    Did you try to use $refs in VueJS instead of using getElementsByClassName. Follow this: https://vuejs.org/v2/api/#ref

     <v-checkbox :class="`read${item.usersmenu_read}`" ref="readCheckbox" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
    
    // and use it in the component
    this.$refs.readCheckbox