Как переделать document.querySelectorAll под Vue.js?

Question

[alienwave]

Переделываю код с чистого js на Vue. Имеется 6 блоков с классом (допустим, .block), управляются через querySelectorAll(), но необходимо оптимизировать под vue-код. Я знаю лишь про $refs, но на каждый элемент ref="" вешать, по-моему, колхоз. Как правильнее всего поступить?

Comments

[0xD34F]

Документацию открывать не пробовали, нет? Ну так попробуйте.

[Михаил]

Зачем вам их получать?

Answer 1

[Aetae]

Правильный ответ: querySelectorAll никак не переделывается под Vue.
Забудь про прямую с работу DOM. В Vue ты работаешь с данными и только данными. Изменения в данных автоматически отражаются на отображении, но отображение ты руками вообще не трогаешь.

Если есть проблемы с пониманием - дай более конкретный пример, и тогда мы подскажем более конкретное решение.

Comments

[alienwave]

https://jsfiddle.net/c9k2qd16/
За табуляцию извиняюсь.

[Aetae]

alienwave, примерно так это делается:
Само собой это не твёрдый шаблон, структуры данных вы можете использовать любые.

За табуляцию извиняюсь.

Ctrl+A, Shift+Tab

[alienwave]

Aetae, это действительно работает, большое спасибо. я, кажется, начал понимать идеологию фреймворков: всё рисуется через js. преследует ощущение, что это, слегка, не моё.

[Aetae]

alienwave, разница лишь в том, что тебе бы пришлось делать то же самое руками.)

[alienwave]

Aetae, вопрос привычки. не чувствовал дискомфорта, когда писал html/js стандартные. люблю простоту.

[krauze666]

А как поступить если у меня несколько элементов за которыми нужно следить. Например
у меня много блоков card-group и для каждого есть заголовок. Все их нужно проверить на пустоту, т.е если "card-group" пустой, то советующий "card-title-group" не отображать. Структура проекта сложная и получается card-group в себе может содержать много других компонентов, в зависимости от условий.

<template>
  <div>
    <p class="card-title-group">Основные параметры</p>
    <div  class="card-group">Блок 1</div> 
    <p class="card-title-group">Основные параметры 2</p>
    <div class="card-group">Блок 2</div>
  </div>
</template>

* используется вью 2

[Aetae]

krauze666, ну во-первых вынести title+block в отдельный компонент, где title - пропс на вход, а содержимое блока - слота. А дальше только костыли, т.к. в нормальной ситуации такого не бывает чтоб оно было пустое где-то внизу без знания об этом наверху.:)