Задать вопрос
Ответы пользователя по тегу Vue.js
  • Как вывести массив данных, Vue.js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Так, и в чём проблема-то? У вас же уже всё есть - при обработке ответа вы собираете массив devices, в шаблоне вы массив devices выводите. Надо только закинуть devices из обработки ответа в data - вместо той ерунды, что у вас сейчас (отдельные свойства одного элемента).

    UPD. Вынесено из комментариев:

    Немного недопонял, можешь продемонстрировать как это задать?

    В data компонента определяете массив devices:

    data: () => ({
      devices: [],
    }),

    При получении ответа закидываете в devices полученные данные:

    this.devices = Object.entries(res.data).map(([ id, n ]) => ({ ...n, id }));

    Ну и выводите их:

    <ul>
      <li v-for="d in devices" :key="d.id">
        ...
    Ответ написан
    3 комментария
  • Vue-router. Что за магия происходит?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Предполагается, что когда пользователь нажмет на фильтр, у меня вызовется функция setRouter...

    Предположение неверное, вызов происходит в момент рендеринга фильтра - заведомо ДО того как пользователь по нему кликнет. То есть, в качестве роута фильтра устанавливается значение, которое после клика по фильтру окажется устаревшим - это и есть причина "запаздывания", о котором вы говорите.

    Вот так, никакой магии.
    Ответ написан
    3 комментария
  • Как вызвать глобальный метод созданный как плагин?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Чтобы можно было так вызывать, метод надо в прототип поместить: Vue.prototype.myGlobalMethod = ....
    Ответ написан
    Комментировать
  • Почему двоичный поиск работает только "вверх"?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Косяков и странностей тут навалом.

    Значение max вы перед началом поиска устанавливаете равным максимальному индексу - отлично. А как же min - почему не устанавливаете его равным 0? Забыли? Или думаете что 0 там сам собой появится? Не появится.

    Кстати, а зачем min и max класть в data? - вне binarySearchInit они не используются. Пусть будут локальными переменными этого метода.

    Значения в массиве являются строками, так что у вас 11 будет меньше, чем 2 (или для вас не существует ничего больше девятки?). Надо сделать числами, замените .push(item) на .push(+item) (или .push(Number(item)), или .push(parseInt(item))). Соответственно, надо сделать числом и search - для этого достаточно добавить соответствующий модификатор v-model.

    Сортировка введённых данных - по умолчанию элементы массива сортируются как строки. Заменить .sort() на .sort((a, b) => a - b).

    Зачем такие сложности с отдельной кнопкой для получения данных? Сделайте array вычисляемым свойством:

    computed: {
      array() {
        return this.info
          .split(';')
          .map(n => parseInt(n))
          .filter(n => !Number.isNaN(n))
          .sort((a, b) => a - b);
      },
    },

    Да и сам результат поиска тоже может быть вычисляемым свойством.
    Ответ написан
    4 комментария
  • Как передать в дочерний компонет значения из стейта?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Пытался разными способами <...> что то явно не так

    А как мне понять, что у вас не так, если вы не показали, как пытались?

    v-model="$store.state.registrations.user_email"

    Изменять состояние вне мутаций не следует, сделайте computed свойство, геттер которого будет забирать данные из хранилища, а сеттер вызывать мутацию:

    user_email: {
      get() {
        return this.$store.state.registrations.user_email;
      },
      set(val) {
        this.$store.commit('update_user_email', val);
      },
    },

    v-model всегда будет разный

    Имя редактируемого свойства можно оформить в виде параметра компонента, и передавать его в мутацию вместе с новым значением (или передавать объект вида { имя_свойства: значение } и с помощью Object.assign закидывать его в объект в стейте - так за один вызов мутации можно будет обновлять несколько свойств).
    Ответ написан
    3 комментария
  • Как сохранять позицию скролла при переходе между беседами?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Ставите ref на прокручиваемый элемент, и читаете/назначаете его scrollTop.
    Ответ написан
    Комментировать
  • Как правильно отключать динамическое изменение данных в компоненте, если сменился route?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Ну раз данные должны обновляться при наличии компонента - отключайте обновление в его beforeDestroy.
    Ответ написан
    Комментировать
  • Как подружить Vue.js и jQuery UI sortable?

    0xD34F
    @0xD34F Куратор тега Vue.js
    А может стоит перестать заниматься ерундой (в смысле - пытаться использовать jquery совместно с vue), и попробовать взглянуть в сторону чего-нибудь более подходящего?

    Ну а так-то проблем нет: DOM-элементам добавляете какой-нибудь атрибут (типа data-id), который будет задавать связь между DOM-элементом и элементом данных; добавляете обработчик update своему sortable, в котором получаете DOM-элементы, выдергиваете значения атрибута, в соответствии с их порядком перестраиваете исходные данные. Например.
    Ответ написан
    Комментировать
  • Почему не рендерится список, полученный по апи?

    0xD34F
    @0xD34F Куратор тега Vue.js
    А зачем вам vue версии 1? Возьмите посвежее, всё будет окей.
    Ответ написан
    2 комментария
  • Как установить метки в Яндекс карте во Vue.js приложении?

    0xD34F
    @0xD34F Куратор тега Яндекс.Карты
    Нет гарантии, что карта загрузится быстрее, чем вы получите данные для меток (этого и не происходит, почему и возникает ошибка), поэтому выполнять запрос данных следует после того, как карта будет готова к использованию - т.е., в ymaps.ready.

    UPD. Вынесено из комментариев:

    Я так понял, вы предлагаете код, который находится в функции setMarkers() перенести в initializeYandexMap(), я прав?

    Нет, не правы. Подумайте ещё. Предположим, вы так сделали. Что будет, если карта загрузится раньше, чем данные? Вы ничего не увидите, потому что массив coordinates будет пустым в момент выполнения setMarkers.

    Ещё раз: выполняйте действия последовательно, а не параллельно - сначала загрузка карты, затем загрузка данных. Это самый простой вариант. Параллельная загрузка организовывается немного посложнее - надо обернуть ymaps.ready в промис, и воспользоваться Promise.all.

    Как это может выглядеть - первый вариант, второй (запрос заменён на setTimeout, но думаю суть понятна).
    Ответ написан
    3 комментария
  • Как эмулировать клик по элементу после того, как он отрендерился?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Элемент - представленный в примере - это FileInput (кликать нужно на него, что бы вызвать диалог выбора файлов)

    Нет, ничего у вас не получится. Этот диалог может быть открыт только в результате настоящих действий пользователя (и то не всех: клик, нажатие клавиши - окей; скролл, движение мыши, вызов контекстного меню - нет), а не их имитации. По крайней мере, в Хроме. В Фаерфоксе имитировать можно.
    Ответ написан
  • Как создать массив с объектами из другого массива?

    0xD34F
    @0xD34F Куратор тега Vue.js
    computed: {
      groupedPosts() {
        return this.posts.reduce((acc, n) => {
          (acc[n.category] = acc[n.category] || []).push(n);
          return acc;
        }, {});
      },
    },

    UPD. Чего на самом деле хотел автор вопроса, вынесено из комментариев:

    При нажатии на название категории хочу выводить посты и соответствующего массива.

    Добавляем ещё одно вычисляемое свойство - массив категорий:

    categories() {
      return Object.keys(this.groupedPosts);
    },

    И обычное свойство - выбранная категория:

    data: () => ({
      activeCategory: null,
      ...

    На основе массива категорий создаём кнопки, по нажатию на которые будет производиться выбор категории:

    <button
      v-for="n in categories"
      v-text="n"
      :class="{ active: n === activeCategory }"
      @click="activeCategory = n"
    ></button>

    Если категория выбрана - показываем соответствующие посты:

    <div v-if="activeCategory">
      <div v-for="n in groupedPosts[activeCategory]" class="post">
        ...

    https://jsfiddle.net/yxf50qg2/
    Ответ написан
  • Как сделать так, чтобы определённый элемент перемещался?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Так, что ли:

    data: () => ({
      items: [...Array(5).keys()],
    }),
    methods: {
      move(index, step) {
        const items = [...this.items];
        const newIndex = Math.min(items.length - 1, Math.max(0, index + step));
        [ items[index], items[newIndex] ] = [ items[newIndex], items[index] ];
        this.items = items;
      },
    
      // или
    
      move(index, step) {
        const { items } = this;
        const newIndex = Math.min(items.length - 1, Math.max(0, index + step));
        items.splice(index, 1, items.splice(newIndex, 1, items[index])[0]);
      },
    
      // или
    
      move(index, step) {
        const newIndex = Math.min(this.items.length - 1, Math.max(0, index + step));
        if (index !== newIndex) {
          const val = this.items[index];
          this.$set(this.items, index, this.items[newIndex]);
          this.$set(this.items, newIndex, val);
        }
      },
    },

    <div v-for="(n, i) in items">
      <input v-model="items[i]">
      <button @click="move(i, -1)">вверх</button>
      <button @click="move(i, +1)">вниз</button>
    </div>

    ??
    Ответ написан
  • Почему не получается обратиться к getters?

    0xD34F
    @0xD34F Куратор тега Vue.js
    не получается обратиться к геттеру <...> показывает null, хотя если вызвать store.getters, то данные есть

    "Показывает null" - значит не успели ещё данные загрузиться к тому моменту, когда вы дёргаете геттер, только и всего. Нечего тут сказки рассказывать про "не получается". Всё окей.

    "Хотя" - не более чем особенность отображения объектов в консоли. Когда разворачиваете объект в первый раз, подтягивается его актуальное содержимое. Т.е., в консоль вы store.getters кидаете до получения данных, а смотрите что там есть уже после.

    Не хотите в компоненте видеть этот null - не надо рендерить экземпляр компонента, пока данные не будут получены:

    <компонент v-if="$store.getters.profile" />

    Правда, прямо сейчас вы так сделать не сможете, есть косяк, вот здесь:

    //Подключаю хранилище
    import store from './store';
    
    store.dispatch('getUser');
    new Vue({
        el: '#app',
        router: router,
        components:{
            'head-app':headImplant,
            'footer-app':footer,
            'sidebar-app': sidebar
        }
    });

    Где подключение-то? Просто импортировать в main.js экземпляр хранилища недостаточно, вы должны передать его в конструктор Vue, как свойство store объекта с настройками:

    new Vue({
      store,
      ...
    Ответ написан
    Комментировать
  • Как заполнить данные все через axios в жизненном цикле created?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Устанавливаете null в качестве начальных значений accounts и transactions. В шаблоне добавляете v-if="accounts" и v-if="transactions" тем блокам, внутри которых рендерятся элементы на основе соответствующих свойств.
    Ответ написан
    1 комментарий
  • Почему не работает router-view?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Если верить тому, что вы показали в качестве разметки - у вас router-view находится за пределами #app (ну и ещё странность - есть закрывающий тэг header, открывающего нет). Соответственно, отображать компоненты маршрутов попросту негде.
    Ответ написан
    1 комментарий
  • Почему метод save_click_or_not работает не правильно?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Vue не может отследить прямую установку значения по индексу.

    Надо использовать $set, замените

    this.steppers[index]=this.steppers[index]+this.step_go

    на

    this.$set(this.steppers, index, this.steppers[index] + this.step_go)
    Ответ написан
    1 комментарий
  • Как использовать значение параметра компонента в качестве имени геттера vuex?

    0xD34F
    @0xD34F Куратор тега Vue.js
    computed: {
      coordinates() {
        return this.$store.getters[`currency/${this.type}`];
      },
    },

    UPD.

    передаю type: <component :type=" 'string' "></compontent>

    А зачем такие сложности? Достаточно просто type="string".
    Ответ написан
    Комментировать
  • Как добавить в data переменную canvas и ctx в Vue, что бы использовать их в разных методах?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Какое-то отдельное свойство для самого канваса не нужно - он доступен через ref.

    Контекст - получаете после монтирования:

    <canvas ref="canvas"></canvas>

    data: () => ({
      ctx: null,
    }),
    mounted() {
      this.ctx = this.$refs.canvas.getContext('2d');
    },

    Ну и используете его:

    methods: {
      updateCanvas() {
        const { ctx } = this;
        ...
    Ответ написан
    Комментировать