Показать элемент при клике vue?

Question

[wowbate]

Скорее всего я тупой, но не могу понять)
Раньше был опыт только на jquery, но не могу понять, как манипулировать dom или как правильно это назвать....

Допустим на jquery есть ajax запрос, в beforeSender я делал $("#preloaderPage").show() То есть при отправке ajax запроса я показываю прелоадер страницы.

Но не понимаю как сделать это на vue не spa.
Допустим я вешаю new Vue на форму. Внутри делаю ивент на отправку формы. Форма уходит по ajax. И вот как я могу обратить с preloaderPage и показать его. На ум только пришла манипуляция с помощью нативного js.

Но никак не могу понять, как это сделать красиво на Vue?

Answer 1

[Алексей Ярков]

Всё проблемы от лени. Вам лень читать документацию и вы решили, что тут за вас сделают. Это тупиковый путь развития разработчика.

По теме. Директива v-if вам в помощь.

Comments

[wowbate]

В том то и дел, документацию прочитал, но вот в этот моменте ступор. v-if да, но я смогу только в рамках одного vue им управлять, разве не так? То есть:

<div id="preloader">
 <div v-if="isPreloader">Сейчас меня видно</div>
</div>

var preloader = new Vue({
  el: '#preloader',
  data: {
    isPreloader: false
}
})

Во собственно на форме теперь у меня другой new Vue form. И как из этой vue я могу показать прелоадер.

<div id="form">тут форма</div>

var preloader = new Vue({
  el: '#form',
  data: {}

  // тут методы ajax и как тут обратиться к preloader, чтобы показать его

})

Вот с этим я хоть убей, но не могу разобраться.

[Илья Корень]

Если вам нужно использовать preloader в форме, то вы его импортируете в компонент формы и вам нужно условие, через которое он будет либо отрисовываться, либо нет. Это условие соответственно должно исходить извне, т.е. из компонента формы. В компоненте прелоадера используйте props, к примеру:

props: {
   isShow: {
      type: Boolean,
      required: true,
      default: () => false
   }
}

Соответственно, из компонента формы пропсами передаете информацию, когда нужно отображать прелоадер.

https://vuejs.org/guide/components/props.html

[wowbate]

Илья Корень, Спасибо. Но если я правильно всё понял из документации, то props это входные параметры. То есть, если я правильно понял, то вы мне предлагаете из формы вызвать компонент прелоадера и его отрисовать. Собственно, а если он уже отрисован? То есть, есть один прелоадер на весь сайт, и куча форм, которые в моменте отправки должны показывать/скрывать прелоадер.

[Илья Корень]

wowbate, в таком случае, если вы не используете vuex, вы можете там где уже у вас есть прелоадер, т.е. там, где вы ипортируете, это главная страница видимо, то делаете тоже самое, что я и описал, только входные параметры лоадеру передаете уже через тот компонент, где прелоадер импортирован.
Нужно также видеть полностью картину вашей логики работы.
К примеру, можно посмотреть в сторону emit, вы в каждой форме эмитите событие отправки формы, а на это событие в рамках главной страницы вы уже организовываете логику отрисовки лоадера.
Т.е. одна форма сгенерировала событие отправки, вы отловили это событие на главной странице и уже там отрисовываете прелоадер.

https://vuejs.org/guide/components/events.html

[wowbate]

Илья Корень, Спасибо. Буду пробовать. Вообще конечно после нативного js как-то это всё странным выглядит.

[Илья Корень]

не за что. Да нет, это кажется) все проще чем кажется, если разобраться)