Задать вопрос
  • Как написать сортировку галереи работы на vue?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Сделайте вычисляемое свойство, которое будет представлять данные, соответствующие выбранной категории:

    computed: {
      filteredWorks() {
        const category = this.tabs.find(n => n.id === this.activeTabId)?.category;
        return category равна той, что у 'Все работы'
          ? this.works
          : this.works.filter(n => n.category === category);
      },

    <div class="articles__items articles__items--works">
      <img v-for="n in filteredWorks" :key="n.id" :src="n.image">
    </div>

    tabs: [
      { id: '1', name: 'Все работы', category: 'doors' },
      { id: '2', name: 'Окна', category: 'windows' },
      { id: '3', name: 'Двери', category: 'doors' },

    Почему у category одинаковые значения (doors)? Надо исправить.
    Ответ написан
    Комментировать
  • Как можно улучшить код?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Ну, у вас, по сути, контент зависит от номера итерации, поэтому массив можно заменить простым циклом от 0 до 10.
    Но в целом, для более сложных сценариев массив - это нормальное решение.
    Ответ написан
    Комментировать
  • Как в select положить все значения включая вложенные из массива объектов?

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

    // есть вариант применить рекурсию
    const flatTree = (tree, childrenKey) =>
      (tree instanceof Array ? tree : []).reduce((acc, n) => (
        acc.push(n, ...flatTree(n[childrenKey], childrenKey)),
        acc
      ), []);
    
    // а можно обойтись и без неё
    const flatTree = function*(tree, childrenKey) {
      const stack = [];
    
      for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
        if (i === arr.length) {
          [ i, arr ] = stack.pop();
        } else {
          yield arr[i];
          stack.push([ i, arr ]);
          [ i, arr ] = this(arr[i][childrenKey]);
        }
      }
    }.bind(x => [ -1, Array.isArray(x) ? x : [] ]);

    Дальше всё просто - вычисляемое свойство, v-for по его значению:

    computed: {
      users() {
        // если использовать обычную функцию
        return flatTree(this.elements, 'children');
    
        // или, генератор
        return [...flatTree(this.elements, 'children')];
      },
    },

    <option v-for="n in users" :key="n.id">{{ n.name }}</option>
    Ответ написан
    1 комментарий