Ответы пользователя по тегу Vue.js
  • Vuex как правильно получать данные через REST API?

    zoroda
    @zoroda
    Необычный Fullstack
    1. В таком подходе не вижу ничего некорректного.
    2. Менять item лучше через мутацию/action. Используйте Vue.set, иначе Vue не отследит измение родительского list.
    Ответ написан
    Комментировать
  • VueJS: Как показать уникальные строки со счётчиком совпадений?

    zoroda
    @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
    @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
    @zoroda
    Необычный Fullstack
    Используйте совместно с v-if
    Ответ написан
    Комментировать
  • Что по вашему мнению стоит учить Vue.js Angular?

    zoroda
    @zoroda
    Необычный Fullstack
    Писал как на Angular, так и на Vue.
    Если делаете небольшие проекты самостоятельно или в небольшой командой, то лёгкий в освоении Vue - ваш путь.
    Если будете учить с прицелом на трудоустройство в большую компанию, то более развесистый Angular.
    Ответ написан
    Комментировать
  • Как удалить соседний элемент?

    zoroda
    @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 комментариев
  • Как публиковать Vue приложение?

    zoroda
    @zoroda
    Необычный Fullstack
    В vue-cli есть команда
    npm run build
    которая создаст минифицированные файлы в ./dist
    Ответ написан
    Комментировать