Question

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

@click icon

<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">

Vuejs v-show没有按预期工作

1 个答案: