时间戳

首页 > 解决方案 > Vuejs v-show 没有按预期工作

vue.js - Vuejs v-show 没有按预期工作

问题描述

我有一个向我的数组添加新项目的表单，但想隐藏表单，直到用户准备好添加项目。表单是隐藏的，我有一个@click附加到图标的功能来切换表单以显示，这也在工作。但是，一旦表单切换为显示，它会在几秒钟内自动隐藏。

@点击图标

<li class="m-portlet__nav-item">
  <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" @click="isSection ^= true">
    <i class="flaticon-add"></i>
  </a>
</li>

形式

<div class="row" v-show="isSection">
  <div class="col-md-12">
    <div style="border: 1px solid #fcfcfc; padding: 1em">
      <h5>Add New Section</h5>
      <hr>
      <form v-on:submit.prevent="addNewSection">
        <div class="form-group m-form__group">
          <input v-model="sections.name" placeholder="Name" class="form-control m-input" style="margin-bottom: .5rem"/>
          <textarea v-model="sections.description" placeholder="Description" class="form-control m-input" style="margin-bottom: .5rem"/></textarea>
          <button type="submit" class="btn btn-primary">Add Section</button>
        </div>
      </form>
    </div>
  </div>
</div>

脚本

new Vue({
    el: "#main",
    data: {
        isSection: false,
        ...

addNewSection

addNewSection() {
    this.sections.push(
        {
            name: this.sections.name,
            description: this.sections.description,
            items: []
        }
    );
    this.sections.name = "";
    this.sections.description = "";
},

标签： vue.js

解决方案

通过href=""在这里设置：

<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" @click="isSection ^= true">

当您单击链接时，您正在触发页面的重新加载。

试试href="#"。

<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" @click="isSection ^= true">

我希望您也只想像isSection上面评论中提到的那样否定，即使您写的内容确实具有相同的目的；这不是常用的语法。

<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" @click="isSection = !isSection">

推荐阅读