@colorkid

Как такой jQuery преобразовать во VUE?

Переписываю старый код с jquery на vue (во всяком случае хочу это сделать). Есть простецкая вещь https://jsfiddle.net/rzkrndyg/1/, попробовал переписать на vue, получилось какая то несуразица, тот же jq только внутри vue компонента. Как подобные вещи правильно реализовывать на vue? Или же такие простые манипуляции с dom на vue лучше не делать вообще?
  • Вопрос задан
  • 509 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Блоки .faq-content__row оформляете в виде отдельного компонента, у которого будут параметры - заголовок и описание, и свойство, отвечающее за показ описания:

props: [ 'title', 'desc' ],
data: () => ({
  showDesc: false,
}),

<div class="faq-content__row">
  <header class="faq-content__title">
    <h2 class="faq-content__h2">{{ title }}</h2>
    <div class="faq-content__button" @click="showDesc = !showDesc">+</div>
  </header>
  <p
    :class="{
      'faq-content__description': true,
      'faq-content__description--active': showDesc,
    }"
  >{{ desc }}</p>
</div>

Сами заголовки и описания делаете свойствами объектов, объекты складываете в массив, на основе которого, с помощью v-for, будут создаваться экземпляры компонента:

data: () => ({
  items: [
    { title: '...', desc: '...' },
    { title: '...', desc: '...' },
    ...
  ],
}),

<div class="wrapper">
  <v-faq
    v-for="item in items"
    v-bind="item"
  ></v-faq>
</div>

https://jsfiddle.net/2s8f4t73/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы