Получить элемент из динамического c имени класса в Vue js - PullRequest
Новая
       17

Получить элемент из динамического c имени класса в Vue js

0 голосов
/ 07 февраля 2020 
<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 ?)

Пожалуйста, дайте мне некоторое объяснение. Спасибо вам всем

1 Ответ

0 голосов
/ 07 февраля 2020

Вы пытались использовать $refs в VueJS вместо 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-data-table вместо этого непосредственно в v-checkbox и установите все флажки в DOM, используя Vue $ refs то же самое выше.
Если вы хотите использовать getElementsByClass, вы можете присвоить флажки с тем же именем, которые не зависят от меню данные, скажем, это «меню-флажок». Ваш флажок будет: 

<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')
...