Как можно переписать этот код под vuejs?

Question

[Александр Фелисон]

Здраствуйте. Написал вот такой код:

$(window).on('load', () => {
  if ($('#main-feed').length) {
    let shadowDomTimeout = setTimeout(function () {
      $('#shadow-dom').remove()
      $('.true-dom').removeClass('is-hidden')
      clearTimeout(shadowDomTimeout)
    }, 2000)
  }
})

И его необходимо переписать под vuejs. Пробовал собственными способами но ничего не вышло.

Answer 1

[Константин Б.]

Вы не верно представляете себе что такое VueJS. VueJS это фреймворк созданный для разработки "реактивных" компонентов. В вашем случае код не имеет отношения к Vue. Ваш пример взаимодействует с DOM элементами, следовательно вам необходимо переписать его на ванильный JS, а далее уже вызывать этот код из методов Vue по событию или в момент инициализации (mount) компонента

P.S. переписать ваш код на ванильный JS дело 1-й минуты, вы к сожалению не можете решить даже эту задачу, но уже пытаетесь писать на Vue. С таким уровнем знаний вам все равно пока путь заказан, так что советую отложить VueJS и поучить JS без примесей вроде jQuery и тому подобных вещей.

P.S.P.S писать за вас тоже нет даже желания, потому что вопрос (без обид) реально ламерский и я очень надеюсь что ни один Алеша не сделает этого - иначе он конченый терпилоид! А для вас это будет опыт, который потребуется дальше если вы хотите работать в этом направлении

Comments

[Александр Фелисон]

Спасибо, попробую выразить в виде кода все что вы сказали

Answer 2

[Aetae]

Константин Б. всё правильно сказал.
Но чисто для твоего понимания, как-то так это будет "выглядеть на vue":

<template>
  <div>
    ...
    <div id="shadow-dom" v-if="isTrueDomHidden"> ... </div>
    <div class="true-dom" :class="{'is-hidden': isTrueDomHidden}"> ... </div>
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainFeed: [], // mainFeed должна получаться и забираться где-то в другом месте внутри vue
      isTrueDomHidden: true
    }
  },
  mounted() {
    if (this.mainFeed.length) setTimeout(() => {
      this.isTrueDomHidden = false;
    }, 2000);
  }
};
</script>

Comments

[Александр Фелисон]

Спасибо.