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

Question

[colorkid]

Переписываю старый код с jquery на vue (во всяком случае хочу это сделать). Есть простецкая вещь https://jsfiddle.net/rzkrndyg/1/, попробовал переписать на vue, получилось какая то несуразица, тот же jq только внутри vue компонента. Как подобные вещи правильно реализовывать на vue? Или же такие простые манипуляции с dom на vue лучше не делать вообще?

Comments

[zorca]

Задач настолько проста, что даже ответа не заслуживает. Просмотрите хотя-бы курс по Vue что-ли:
https://laracasts.com/series/learn-vue-2-step-by-step

Answer 1

[0xD34F]

Блоки .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/

Comments

[colorkid]

Благодарю за вариант. Честно говоря так тоже думал, но я бы хотел без изменения своего html шаблона, поэтому и решил спросить здесь. Скажите а как на счет SEO, как к таким шаблонам из VUE(где разметка написана в js) относятся поисковики?

[vetsmen]

colorkid, используй SSR

Answer 2

[Igor Koch]

https://jsfiddle.net/rzkrndyg/2/

Comments

[colorkid]

Благодарю за вариант. Честно говоря так тоже думал, но я бы хотел без изменения своего html шаблона, поэтому и решил спросить здесь. Скажите а как на счет SEO, как к таким шаблонам из VUE(где разметка написана в js) относятся поисковики?

[Igor Koch]

colorkid, Google умеет индексировать, яндекс нет, но обещают научится