Ответы пользователя Александр Шелеметьев по тегу «Vue.js»

Как правильно получать данные через REST API?

Александр Шелеметьев @zoroda

Необычный Fullstack

1. В таком подходе не вижу ничего некорректного.
2. Менять item лучше через мутацию/action. Используйте Vue.set, иначе Vue не отследит измение родительского list.

Ответ написан более трёх лет назад

Комментировать

Как показать уникальные строки со счётчиком совпадений?

Александр Шелеметьев @zoroda

Необычный Fullstack

Как писал 0xD34F, сделайте computed свойства и выводите их через v-for.
Пример:

computed: {
  countries () {
    return this.data
      .map((x) => x.country) // для каждого элемента из массива объектов data возвращаем страну
      .reduce((r, с) => [...new Set(r.concat(с))], []) // оставляем только уникальные значения
      .map((с) => { // для каждого элемента из полученного массива
        return { // возвращаем 
          'country': с, // наименование страны
          'count': this.data.filter(cx => cx.country === с).length // количество элементов в исходном массиве с таким же наименованием страны
        }
      })
  }
}

для городов и типов делаете так же

UPD.
Чтобы не дублировать код, сделайте по аналогии с функцией выше метод, возвращающий из вашего массива новый массив уникальных значений с количеством вхождений

Ответ написан более трёх лет назад

Комментировать

Как сделать авто обновление контента vue.js?

Александр Шелеметьев @zoroda

Необычный Fullstack

Есть два основных решения:
1. Организовать периодический опрос сервера из приложения. Например, при помощи функции window.setInterval(), вызывать которую можно из секции mounted ().
2. Организовать доставку сообщений по инициативе сервера. Обычно это web socket.
Оба решения имеют свои плюсы и минусы. Проще, конечно, первый.
Вот кусок кода из моего проекта:

const axios = require('axios')

export default {
  methods: {
    getCounters (count = 1, time = '', start) {
      axios.get(this.url + 'counters/' + this.server + '/?count=' + count + '&time=' + (time || '&noCache=' + (new Date().getTime()) + Math.random()))
        .then((res) => {
            this.currentData= res.data[0]
        })
        .catch((err) => {
          this.queryError = 'Нет ответа от сервера'
        })
    },
    stopTimer () {
      if (this.interval) {
        window.clearInterval(this.interval)
      }
    },
    startTimer () {
      this.stopTimer()
      this.interval = window.setInterval(() => {
        this.getCounters()
      }, 1000)
    }
  },
  mounted () {
    this.startTimer()
  },
  beforeDestroy () {
    this.stopTimer()
  }
}

Ответ написан более трёх лет назад

Комментировать

Как цикл v-for можно начать не с 1 во vue?

Александр Шелеметьев @zoroda

Необычный Fullstack

Используйте совместно с v-if

Ответ написан более трёх лет назад

Комментировать

Что по вашему мнению стоит учить Vue.js или Angular?

Александр Шелеметьев @zoroda

Необычный Fullstack

Писал как на Angular, так и на Vue.
Если делаете небольшие проекты самостоятельно или в небольшой командой, то лёгкий в освоении Vue - ваш путь.
Если будете учить с прицелом на трудоустройство в большую компанию, то более развесистый Angular.

Ответ написан более трёх лет назад

Комментировать

Как удалить соседний элемент?

Александр Шелеметьев @zoroda

Необычный Fullstack

Используйте тэг

ref

:

<tr v-for="row in data2" class="row body">
    <td>
        <button 
ref="myButton"
class="checkbox"
@click="clrRow">x</button>
        <input type="text" v-model="row.wednesday_from">
        <input type="text" v-model="row.wednesday_to">
    </td>
</tr>

В скрипте можете обратиться к этому элементу:
console.log(this.$refs.myButton.$parent.$children)
Посмотрите в консоли, как добраться до нужных вам свойств.
Впрочем, во Vue вам достаточно обнулить привязанную к `input` переменную.
Дока на русском
ref должны быть уникальными. Их можно генерить динамически, например:
:ref="'buttonClr' + row.id"

P.S.
Что-то подобное делал у себя.

Ответ написан более трёх лет назад

7 комментариев