Задать вопрос
Ответы пользователя по тегу Vue.js
  • Почему шина событий не слышит событие?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Возможная причина номер раз - в тот момент, когда вы делаете emit события, отсутствует экземпляр компонента, где вы пытаетесь его слушать.

    Возможная причина номер два:

    bus.$off('selectedCompanies')

    Толково придумано. Давайте представим, что создаётся два... нет, лучше пять экземпляров компонента. Затем один удаляется. Вопрос - сколько после этого останется обработчиков события selectedCompanies? Думаете, что четыре? А вот и нет - ни одного. Надо всё-таки указывать, какой именно обработчик вы удаляете.

    Наконец, возможная причина номер три:

    Есть 2 независимы страницы.

    Очень надеюсь, вы подразумеваете не разные вкладки/окна браузера.
    Если всё-таки да...

    ...ну, поздравляю - чего-то вы в этой жизни не понимаете, от слова совсем. Нет реакции на событие потому, что шин у вас две - и ничего они друг о друге не знают. В этом случае вам нужна не шина, а надо как-то пересылать информацию между вкладками. Для этого можно использовать localStorage (есть плагины для vuex под это дело, можете погуглить), или BroadcastChannel.
    Ответ написан
  • Почему при поиске вылезает TypeError: Cannot read property 'toString' of null?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Какое-то из свойств объекта оказалось null'ом. Почему бы не добавить проверку перед toString'ом - что именно вы собираетесь преобразовывать? Может и не надо перегонять null'ы в строки, может, в этом случае результат поиска сразу отрицательный должен быть. Ну или преобразовывайте в строку как-нибудь иначе, варианты разные есть: ('' + m) или `${m}` или String(m).

    А вообще, вы конечно поторопились вот так в лоб использовать первый попавшийся код. Вон, у вас там ещё и вложенные объекты есть, по их свойствам поиск корректно работать не будет (т.к. дефолтное строковое представление объекта - это '[object Object]') - об этом вы подумали? Нет, точно надо проверять, что за значение:

    return this.sortedTokens_VMP.filter(n => Object.values(n).some(m => {
      if (m instanceof Object) {
        // проверяем объект, возможно, стоит сделать какую-нибудь рекурсивную функцию под это дело
      } else if (typeof m === 'number') {
        // а вдруг числа надо обрабатывать иначе, чем строки
      } else {
        // какая-то дефолтная проверка значения
      }
    }));

    UPD. А сортировка, сортировка-то - тоже ведь ерунда получится при работе с null'ами и вложенными свойствами.

    Вот как всё будет:

    Рекурсивная функция, которая проверяет, есть ли где во вложенных объектах указанная строка:

    const includes = (obj, str) => Object
      .values(obj)
      .some(n => n instanceof Object
        ? includes(n, str)
        : `${n}`.toLowerCase().includes(str)
      );

    Используем её внутри вычисляемого свойства, представляющего отфильтрованные данные:

    filteredTokens_VMP() {
      const s = this.search.toLowerCase();
      return this.sortedTokens_VMP.filter(n => includes(n, s));
    },

    Функция, извлекающая вложенное значение по строке, где ключи разделены точками:

    const getNested = (root, path) => path
      .split('.')
      .reduce((p, c) => p != null ? p[c] : p, root);

    Используем её в вычисляемом свойстве, представляющем отсортированные данные, если попадается nullish значение, будем загонять соответствующий элемент в конец:

    sortedTokens_VMP() {
      const reverse = this.sort.reverse ? -1 : 1;
      return this.tokens_VMP
        .map(n => [ getNested(n, this.sort.key), n ])
        .sort(([a], [b]) => reverse * (
          a == null ?  Infinity :
          b == null ? -Infinity :
          a < b     ?        -1 :
          a > b     ?         1 :
                              0
        ))
        .map(n => n[1]);
    },
    Ответ написан
  • Как организовать поиск во Vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    вот пример - https://codepen.io/pespantelis/pen/ojwgPB?editors=1010,
    но здесь используется версия vue/0.12.16/vue.min.js

    Нет проблем переписать с использованием актуальной версии vue.
    Ответ написан
    1 комментарий
  • Как сделать микшер цветов на vue.js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Создадим объект, который будет содержать компоненты цвета:

    colorComponents: {
      r: 0,
      g: 0,
      b: 0,
    },

    На основе этого объекта создадим элементы управления значениями компонентов цвета:

    <div v-for="(v, k) in colorComponents">
      {{ k }}
      <input v-model="colorComponents[k]" type="range" min="0" max="255">
      {{ v }}
    </div>

    И стилизуем какой-нибудь элемент, вычисляя итоговый цвет:

    <div :style="style">

    computed: {
      style() {
        return {
          'background-color': `rgb(${Object.values(this.colorComponents).join(',')})`,
        };
      },
    },

    jsfiddle.net/o1xe8gmk/1
    Ответ написан
    Комментировать
  • Можли ли продолжить всплытие собственных событий в vue.js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    А можно ли как то прокинуть это событие далее(всплытие), что бы можно было его прослушать на любом компоненте-предке, в том числе и на корневом?

    Вручную в каждом компоненте делайте emit, или гуглите, как сделать шину событий (event bus) - можно будет подписываться на нужное событие где угодно.
    Ответ написан
    1 комментарий
  • Почему mouseout не так работает?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Всё работает так, как и должно. Чтобы получить требуемое поведение, надо обрабатывать другие события:

    @mouseenter="showDrop = true"
    @mouseleave="showDrop = false"

    UPD. А зачем два свойства для управления отображением форм? Они что, могут показываться одновременно? Может, лучше сделать одно свойство, которое будет содержать имя показываемой формы? Как-то так:

    data: () => ({
      showForm: 'auth',
      // ...
    }),

    Форма авторизации: v-show="showForm === 'auth'", @click="showForm = 'reg'".
    Форма регистрации: v-show="showForm === 'reg'", @click="showForm = 'auth'".
    Ответ написан
    1 комментарий
  • Можно ли использовать mixin в разных компонентах vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Если в одном компоненте произойдет ошибка, будет ли это видно в другом?

    Если нет, то подскажите, как...

    vuex

    Переносите errorOnUpdate в хранилище, а в миксине делаете computed свойство, достающее errorOnUpdate и метод, который будет дёргать мутацию, меняющую значение errorOnUpdate (или просто заменяете присваивание вызовом мутации в методе update, тут вам виднее).
    Ответ написан
    Комментировать
  • Как использовать Vue.set в mixins?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Замените

    const Vue = require('vue');

    на

    const Vue = require('vue').default;
    Ответ написан
    2 комментария
  • Как вывести в v-for по строке - data переменную?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Могу предложить пару вариантов.

    1. Пусть данные компонента станут свойствами объекта, тогда их можно будет получать по имени свойства. Типа так.

    2. Сделайте computed свойство, которое будет представлять текущий набор данных. Типа так.

    ...

    А, ну и конечно ключевое слово this - оно тоже доступно в шаблоне. Так что есть и третий вариант (ну, на самом деле это вариант "полтора" - отличий от первого по сути нет никаких).

    UPD. Конечно, все эти три варианта суть одно и то же - получение свойства объекта по имени в переменной. То есть, в конечном счёте, проблема в слабом знании языка. Я бы на вашем месте подтянул основы, а то так и будете сюда бегать с такими вот тривиальными вопросами.
    Ответ написан
    3 комментария
  • Как в Vue передать из компонента в родителя?

    0xD34F
    @0xD34F Куратор тега Vue.js
    @changeMessage="changeMessage"

    Да ну? Я вот слышал, будто бы

    директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным
    Ответ написан
    3 комментария
  • Как это сделать на Vue.js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    контент у всех блоков разный - поэтому в массив их не засунуть

    Засунуть. За отличающийся контент пусть отвечает отдельное свойство элементов массива. Если же контент вот прям совсем разный, ничего общего - оформить блоки в виде отдельных компонентов, хранить в элементе массива имя компонента - ну а дальше вместе с v-for использовать :is.
    Ответ написан
    9 комментариев
  • Как изменить input value при использовании v-model для нескольких input vue js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Уберите обработчик события change, он тут не нужен.
    Ответ написан
  • Как исправить ошибку "сannot read property of undefined"?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Используйте v-if - пока данных нет, не надо пытаться на их основе ничего рендерить. Как-то так:

    <thead v-if="options.head">
    ...
    <tbody v-if="options.body">
    Ответ написан
  • Ошибка при импорте метода?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Ясно же написано - метод не определён. Добавьте его в methods компонента:

    methods: {
      trans
    }
    Ответ написан
  • Как вызвать метод в компоненте vue после загрузки начального состояния?

    0xD34F
    @0xD34F Куратор тега Vue.js
    mutations: {
      [GET_USER_INFO](state) {
        axios.get('http://localhost:3000/user')
          ...

    Ох ни хрена ж себе. Документацию-то читали?

    хочется, чтоб saveProfile или действие, которое внутри - this.$store.dispatch('loadInfo') вызывалось сразу после того, как загружено начальное состояние

    created
    Ответ написан
    Комментировать
  • Как правильно оборачивать чужие компоненты?

    0xD34F
    @0xD34F Куратор тега Vue.js
    <alien-component
      :value="value"
      @input="$emit('input', this.$event.target.value)" 
    />

    Никаких target'ов не надо, вы из компонента получаете само значение, так что правильно будет так:

    <alien-component
      :value="value"
      @input="$emit('input', $event)" 
    />
    Ответ написан
    1 комментарий
  • Есть ли другой способ, чтоб не использовать $parent.$parent не использовать?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Хочу получить метод из родителя родителя.

    А может, вам не надо никакой метод получать? Может, лучше эмитить событие, и обрабатывать его?

    То, что вы хотите сделать, звучит как что-то не очень правильное. Вы лучше расскажите, какую задачу пытаетесь решить (а еще лучше - покажите код).
    Ответ написан
  • Как связать el-select и vuex?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Выкидывайте v-model, вместо этого задавайте элементам value, и вешайте обработчик события input, в который будет передаваться имя свойства, а внутри будет дёргаться мутация:

    <el-select :value="item2.select.value" @input="onInput(item2.name, $event)">

    methods: {
      onInput(propName, propVal) {
        this.$store.commit('updateForm', { propName, propVal });
      },
    },
    Ответ написан
    3 комментария
  • Как в Vue прервать отправку формы по нажатию на enter на input?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Дело в том, что если в форме присутствует всего одно поле ввода, то, согласно спецификации, нажатие enter'а должно приводить к отправке формы:

    When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.


    Что делать? Блокировать действие по умолчанию при нажатии enter'а, добавить input'у @keypress.enter.prevent.
    Ответ написан
    1 комментарий
  • Почему выходит ошибка во Vuex с v-model?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Как я понял, v-model в компоненте ProductRow обновляет почему-то не локальную копию item, а state у стора

    А с чего вы взяли, что у вас тут где-то есть какая-то "локальная копия"? Нет, серьёзно - попробуйте показать то место у себя в коде, где, как вам кажется, вы создаёте копии значений из стора.

    Предположу, что...
    ...под копированием вы подразумеваете

    data() {
        return {
            'item': this.initialItem
        }
    }

    Нет, это не копирование объекта - так вы лишь создали ещё одну ссылку на объект. Для создания копии данных делайте так: Object.assign({}, this.initialItem). Или так: { ...this.initialItem }.
    Ответ написан
    3 комментария