Контакты
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (125)

Наибольший вклад в теги

Все теги (151)

Лучшие ответы пользователя

Все ответы (3726)
  • Как правильно реализовать вызов множества диалоговых окон во Vue (Vuex, Element UI)?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Передавайте в мутацию вместо просто состояния диалога объект вида { имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:

    mutations: {
      dialogShow(state, payload) {
        Object.assign(state.modals, payload);
      },
    },

    В компоненте, вместо вычисляемого свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов. А чтобы изменение состояния диалога по-прежнему выглядело как присваивание, воспользуемся Proxy, где будем перехватывать установку значений и вызывать мутацию:

    modals() {
      return new Proxy(this.$store.state.modals, {
        set: (target, prop, value) => {
          this.$store.commit('dialogShow', { [prop]: value });
          return true;
        },
      });
    },

    Соответственно, в шаблоне заменяем установку значения просто свойства на установку значения свойства объекта:

    <el-button @click="modals.dialogSignIn = true">sign in</el-button>
    
    <el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
      <span slot="footer" class="dialog-footer">
        <el-button @click="modals.dialogSignIn = false">Отмена</el-button>
        <el-button type="primary" @click="modals.dialogSignIn = false">Ок</el-button>
      </span>
    </el-dialog>

    Посмотреть живьём.
    Ответ написан
  • Как рендерить слоты в списке?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Честно говоря, не очень понятно - а зачем тут вообще слоты. Передавайте в компонент данные обычным параметром, на их основе создавайте список.

    Но если всё-таки нужно использовать именно слот - пишите собственную render-функцию. Т.е., вместо шаблона, который есть у вас сейчас, будет что-то вроде

    export default {
      render(h) {
        return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])))
      }
    }


    UPD. Если, помимо собственно списка в будущем планируется добавить в компонент List ещё какие-то элементы, то наверное будет не очень удобно рендерить всё это дело через функцию, поэтому можно написать небольшой компонент-обёртку для элементов слота:

    components: {
      SlotWrapper: {
        functional: true,
        render: (h, context) => context.props.node
      }
    }

    <li v-for="n in $slots['list-item']">
      <slot-wrapper :node="n"></slot-wrapper>
    </li>
    Ответ написан
  • Как реализовать подзагрузку страницы перед переходом на нее в Vue JS?

    0xD34F
    @0xD34F Куратор тега Vue.js
    В интересующем вас компоненте определяете хук beforeRouteEnter - в нём и инициируете получение данных. Как оно конкретно выглядит - непосредственно выполнение запроса, или вызов экшена - тут вам виднее. После получения данных дёргаете next. Всё.

    UPD. Не, не всё. Если не очень поняли, о чём я - сделал небольшой пример. Три роута, первые два ни о чём, последний - показывает данные из хранилища. И при каждом переходе инициирует их обновление.
    Ответ написан
  • Как во Vuetify карусели вынести элементы управления навигацией за пределы самой карусели?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Сама идея выносить элементы компонента за его пределы - сомнительная, мягко говоря. Разве что через css можно создать видимость, что какие-то элементы находятся вовне. И разумеется, API компонента подобной возможности не предоставляет.

    Поскольку для компонента доступна директива v-model - можно создать внешние элементы управления (скрыв при этом дефолтные), например так (просто кнопки). Или так (используется компонент пагинации).
    Ответ написан
  • Vue-tables-2. Как выводить данные из вложенных объектов?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Поиск по свойствам вложенных объектов "из коробки" не предусмотрен. Так что придётся реализовывать его самостоятельно.

    Способов вижу три:
    • Перенос свойств вложенных объектов непосредственно в объект строки таблицы. То есть, сейчас у вас есть { user: { city: { name: "..." } } } , а будет { userCityName: "..." } или { user_city_name: "..." }, как-то так.
    • Создание кастомных фильтров по столбцам, созданным с помощью templates. Всё вручную - создание фильтра, написание логики его работы и т.д. Также из минусов данного подхода - элементы управления кастомных фильтров находятся за пределами таблицы, в отличие от встроенных. Нагуглил пример реализации, на его основе сделал пример поиска по свойствам вложенных объектов.
    • Наконец, можно обернуть данные в Proxy. Определять templates в этом случае не нужно, всё работает так, будто интересующие нас свойства принадлежат не вложенным объектам, а непосредственно объекту строки таблицы. Соответственно, и встроенный поиск тоже доступен. Идея в чем: делаем get-ловушку, в ней режем имя свойства, например "user.city.name", на куски, идём вглубь по полученной цепочке имён, достаём значение. Опять же, сделал небольшой пример.
    Ответ написан