Vuejs v-show работает не так, как ожидалось

Studio Rooster спросил: 12 мая 2018 в 03:46 в: vue.js

У меня есть форма для добавления новых элементов в мой массив, но хотелось бы скрыть форму до тех пор, пока пользователь не будет готов добавить элемент. Форма скрыта, и у меня есть функция @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 = "";
},

vue.js

zero298 ответил: 12 мая 2018 в 03:49

Можете ли вы показать некоторые из addNewSection? Это актуально?

Studio Rooster ответил: 12 мая 2018 в 03:51

@ zero298 Это не должно быть актуально, но я добавил его к исходному вопросу.

1 ответ

Есть решение

Bert ответил: 12 мая 2018 в 05:00

Установив 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">

zero298 ответил: 12 мая 2018 в 04:53

Честно говоря, я думаю, что это должно быть <button> для целей доступности.

Bert ответил: 12 мая 2018 в 04:55

@ zero298 Я бы не согласился с этим.

Luis Mendoza ответил: 12 мая 2018 в 05:00

Да, я думаю, что кнопка - лучший подход, чтобы заставить ее работать

Sphinx ответил: 12 мая 2018 в 06:43

если в проекте используется Vue Router, а режим hashmode, использовать href="any" не рекомендуется. использует style="cursor: pointer", если вам нужен только указатель, такой же, как <a href="any">