时间戳

首页 > 解决方案 > Vue在单击时发出另一个元素的引用

javascript - Vue在单击时发出另一个元素的引用

问题描述

您好，我如何通过 className 或其他方式获取元素。所以我实际上需要通过 className 获取元素，但在这种情况下我不知道如何做到这一点：

这是我的小提琴：https ://jsfiddle.net/cihanzengin/aq9Laaew/294154/ 只是我想这样做：当单击方法中的菜单时，我尝试获取具有类名导航的元素。我试着用 ref 做，但我做不到

这是我的代码：

<div id="app">
        <some-component  @get-element="getElement"></some-component>
    </div>

    <script>
        var someComponent = Vue.component("some-component", {
        template: `
            <div class="columns mobile-navigation">
            <div class="column drawer">
                <a class="is" @click="$emit('get-element')">MENU</a>
            </div>
            <div ref="nav" class="column mobile-nav-wrapper">
                <p> Some Text </p>
            </div>
            </div>
        `
        });

        var app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "mobile-nav": mobileNav
        },
        methods: {
            getElement() {
            console.log(this.$refs.nav);
            }
        }
        });
    </script>

标签： javascriptvue.jsref

解决方案

你可以尝试这样的事情。

var classToCheck = 'myclass';

if( this.$refs.nav.classList.includes(classToCheck) ){
 // includes above class
}

或者

myclickevent(event){

    event.target.classList // this will get you classList of of clicked element then you can compare

}

这包含您的元素的所有类

this.$refs.nav.classList

推荐阅读