Контакты

Достижения

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

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

Все теги (145)

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

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

    0xD34F
    @0xD34F
    Передавайте в мутацию кроме состояния диалога ещё и его имя:

    mutations: {
      dialogShow(state, { name, show }) {
        state.modals[name] = show;
      }
    }

    Вместо свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов:

    computed: {
      modals() {
        return this.$store.state.modals;
      }
    }

    И методы для установки состояния диалога (или один метод, если будете передавать в него кроме имени диалога ещё и устанавливаемое состояние):

    methods: {
      open(name) {
        this.$store.commit('dialogShow', { name, show: true });
      },
      close(name) {
        this.$store.commit('dialogShow', { name, show: false });
      }
    }

    Ну а использоваться это всё будет как-то так:

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


    UPD. Если хотите, чтобы установка состояния диалога по-прежнему выглядела как присваивание значения - можно воспользоваться Proxy, свойство modals будет выглядеть так:

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

    Ну и соответственно:

    <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
    Честно говоря, не очень понятно - а зачем тут вообще слоты. Передавайте в компонент данные обычным параметром, на их основе создавайте список.

    Но если всё-таки нужно использовать именно слот - пишите собственную 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
    В интересующем вас компоненте определяете хук beforeRouteEnter - в нём и инициируете получение данных. Как оно конкретно выглядит - непосредственно выполнение запроса, или вызов экшена - тут вам виднее. После получения данных дёргаете next. Всё.

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

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

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

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

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