单击链接时取消选中复选框

Question

我正在用纯 HTML 和 CSS（来自CodeMyUI ）做这个简单的汉堡菜单，我希望它在单击链接时自动关闭。 使用带有router-links的vue不会重新加载页面。

<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

当单击菜单中的链接时，您需要取消选中<input type="checkbox" id="menu" /> 。

一个不错的 vue 事件解释如下：https ://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers

也许以某种方式是这样的：

模板

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

js

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

Answer 2

您是否尝试过使用 v-model 来绑定值？

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

然后你应该在 checkboxValue 到 data() 和 uncheck 方法到方法。

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

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

有了这个，您应该能够在单击链接后取消选中该复选框。

编辑：显然 routes-link 元素不支持@click，但它可能支持@click.native（或v-on:click.native）