Задать вопрос
dubr

Илья Мясин

пыхарь
Ответы пользователя по тегу Vue.js

  • Как принудительно остановить отрисовку всех vuejs компонентов?

    dubr
    @dubr
    пыхарь
    Ну вот надо чтобы до перезагрузки страницы интерфейс "замер".

    Попробуйте примерно так:
    const appNode = document.querySelector('#app');
appNode.innerHTML = appNode.innerHTML;

    По идее обработчики событий должны пропасть, а компоненты потеряют связь с DOM и всякие отложенные действия перестанут работать. Но это не точно =)
    Ответ написан
    Комментировать
    Комментировать

  • Добавить в массив rows (vue.js) данные из базы mysql (php)?

    dubr
    @dubr
    пыхарь
    Если я правильно понимаю, тут не SPA со сборкой, а олдскульные пхп-шаблоны, верно?
    Тогда можно данные пихать в дата-атрибут примерно так:
    <div id="app" data-rows='<?=json_encode($rows)?>'>...</div>

    А потом читать их примерно так:
    data() {
   return { rows: JSON.parse(this.$el.getAttribute('data-rows')) };
}

    Но вообще да, лучше, как писали выше, отдавать апишкой и забирать аксиосом =)
    Ответ написан
    Комментировать
    Комментировать

  • Как в компоненте отследить изменение полей для включения кнопок сохранения?

    dubr
    @dubr
    пыхарь
    Вотчеры - это обычно признак джейквири-программирования =)
    Лучше сохранять оригинальные данные и их сравнивать с текущими. Так и честный changed будет (у вас скорее "touched").

    Вот набросал примерно: 
    const api = {
  async getData() {
    return {name: 'Foo', email: 'foo@bar.com'};
  }
}

new Vue({
  el:'#app',
  template: `<div v-if="current">
    <input v-model="current.name" />
    <input v-model="current.email" />
    <button :disabled="!isChanged">submit</button>
  </div>`,
  data() {
    return {
      original: null,
      current: null,
    }
  },
  async created() {
    const data = await api.getData();
    this.original = JSON.stringify(data);
    this.current = data;
  },
  computed: {
    isChanged() {
      return JSON.stringify(this.current) !== this.original;
    }
  }
});

    https://codepen.io/dubrowsky/pen/BvdKZE?editors=1010

    UPD: Если нужен не changed, а touched - сделайте 
    <input type="text" v-model="name" @input="name_changed = true">
    и будет счастие
    Ответ написан
    3 комментария
    3 комментария

  • Как отследить удаление DOM элемента во vue.js?

    dubr
    @dubr
    пыхарь
    1) можно поюзать https://developer.mozilla.org/en-US/docs/Web/API/M... - если не нужны старые IE (если нужны - для 9-10 можно подпереть вот этим https://developer.mozilla.org/en-US/docs/Web/API/M... )

    2) можно пропатчить либу (и заслать MR, если либа живая)

    3) самый тупой и рабочий способ, который советовали в комментах и который я бы скорее всего и взял - проверять присутствие элемента через интервал / requestAnimationFrame

    4) есть совсем злое решение: переопределить node.parentNode.removeChild, добавив туда ваш колбек - только никому не показывайте =)
    Ответ написан
    Комментировать
    Комментировать

  • ForEach внутри директивы v-if?

    dubr
    @dubr
    пыхарь
    В доке пишут:

    When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately.

    То есть выполняется цикл, и на каждом шаге - проверка. Чтобы об этом не думать, можно тупо не использовать эти директивы вместе, а писать явно. Для этого есть встроенный "прозрачный" тег template:

    <template v-if="shouldShowAllTags()">
   <a v-for="tag in tags">{{tag}}</a>
</template>
...
<template v-for="tag in tags">
   <a v-if="shouldShowThisTag(tag)">{{tag}}</a>
</template>


    Теперь:
    1) мы можем добавить v-else, если понадобится
    2) человек, не читавший доку по ссылке выше, поймет как оно работает "на глаз", без экспериментов :)

    UPD: Перечитал комменты в соседнем ответе, вам оказывается надо другое =) Но все равно оставлю, в назидание будущим поколениям ))
    Ответ написан
    Комментировать
    Комментировать

  • Смена активного класса при клике с помощью vue.js?

    dubr
    @dubr
    пыхарь
    Я бы сделал так

    1) item и active - плохие названия для переменных, хранящих класс, makeActive - плохое название метода, его меняющего. Называем все по-людски.
    data: {
    activeClass: 'container'
    ...
},
methods: {
    setActiveClass: function(className) { ... }
}


    2) Хардкодить повторяющиеся штуки - это плохо, поэтому выносим список кнопок и связанных с ними классов в data, а в шаблоне ходим циклом:

    data: {
    activeClass: 'container',
    buttons: [
      ['+', 'container'],
      ['-', 'container-fluid']
    ]
}
    <button  v-for="[label, className] in buttons">...</button>


    3) Собственно, теперь у нас есть все данные, чтобы выделить нужную кнопку. Кнопка активна, если текущий класс равен привязанному к ней классу, хранить отдельно состояние кнопки в data нет необходимости.
    Дописываем шаблон:

    <button 
         v-for="[label, className] in buttons"
         v-on:click="setActiveClass(className)"
         v-bind:class="{ active: className === activeClass }">
        {{label}}
      </button>
    Ответ написан
    Комментировать
    Комментировать