링크를 클릭하면 체크 박스를 선택 해제하십시오.

Question

순수 HTML 및 CSS (CodeMyUI)에서이 간단한 햄버거 메뉴를 수행하고 있으며 링크를 클릭하면 자동 닫기를 원합니다. vue을 router-links과 함께 사용하면 페이지가 다시로드되지 않습니다.

<template> 
    <nav> 
    <input type="checkbox" id="menu" /> 
    <label for="menu"></label> 
    <div class="menu-content"> 
     <router-link to="/" class="mainlink">{{ $t("message.navFront") }}</router-link> 
     <router-link to="/about" class="mainlink">{{ $t("message.navAbout") }}</router-link> 
     <router-link to="/portfolio" class="mainlink">{{ $t("message.navPort") }}</router-link> 
    </div> 
    </nav> 
</template> 

Answer 1

v-model을 사용하여 값을 바인딩 해 보았습니까?

<input type="checkbox" id="menu" v-model="checkboxValue /> 
<router-link to="/" class="mainlink" @click.native="uncheck">{{ $t("message.navFront") }}</router-link> 

그런 다음 checkboxValue to the data()에 값을 지정하고 메소드에 대한 선택을 취소하십시오.

data() { 
return { 
    checkboxValue: false, 
}; }, 

methods:{ 
uncheck(){ 
    this.checkboxValue = false; 
}} 

이렇게하면 링크를 클릭하면 확인란의 선택을 취소 할 수 있습니다.

편집 : 그래서 분명히 경로 링크 요소는 @click을 지원하지 않지만, @의 click.native를 지원할 수 있습니다 (또는 V-에 : click.native)

Answer 2

<input type="checkbox" id="menu" /> 메뉴의 링크에서 클릭이 발생하면 선택을 취소해야합니다. 이 같은 아마 어떻게 든 https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

: 멋진 VUE 이벤트와

여기처럼 설명

템플릿

<router-link to="/" class="mainlink" v-on:click="uncheck"> {{ $t("message.navFront") }} </router-link> 

JS

methods: { 
    uncheck: function (event) { 
     document.getElementById("menu").checked = false; 
    } 
    }