Vuejs v-show没有按预期工作

Question

我有一个表单来向我的数组添加新项目,但是想要隐藏表单直到用户准备添加项目.表单是隐藏的,我有一个@click附加到图标的功能,以切换要显示的表单,这也是有效的.但是,只要表格切换显示,它就会在几秒钟内自动隐藏.

@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 = "";
},

Answer 1

通过设置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">