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的data（）和uncheck方法的方法。

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

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

使用此功能，您可以在单击链接后取消选中该复选框。

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

Answer 2

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

有一个很好的vue事件，如下所示：https://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;
    }
   }

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

2 个答案: