从 Vue js 中的动态 class 名称获取元素

Question

<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>

大家好，我对这段代码有疑问，我想获取 ElementByClassName

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

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

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

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

Answer 1

您是否尝试在 VueJS 中使用 $refs 而不是使用 getElementsByClassName。按照这个：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

更新：针对多个复选框
您可以直接在 v-checkbox 中将 ref 分配给 v-data-table，并通过使用 Vue $refs 获取 DOM 中的所有复选框。
如果您想使用 getElementsByClass，您可以为复选框指定一个不依赖于菜单数据的相同名称，例如 "menu-checkbox"。您的复选框将是：

<v-checkbox class="menu-checkbox" :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
// same for edit/add/delete

现在您可以通过以下方式检索所有复选框：

document.getElementsByClassName('menu-checkbox')

从 Vue js 中的动态 class 名称获取元素

Get Element from dynamic class name in Vue js

javascript

class

getelementsbyclassname

vue.js