Вопрос:

Откройте диалоговое окно Vuetify из шаблона компонента в VueJS

javascript vuejs2 vue-component vuetify.js

26199 просмотра

6 ответа

612 Репутация автора

Я использую платформу VueJS Vuetify, и мне нужно открыть диалоговое окно - которое импортируется как шаблон компонента - из другого шаблона. После нажатия кнопки « Меню» в App.vue модал должен открыться. Вот моя установка:

  • App.vue = шаблон навигации с кнопкой меню
  • Modal.vue = Модальный шаблон, импортированный как глобальный в main.js

main.js

import Modal from './components/Modal.vue'
Vue.component('modal', Modal)

Шаблон Modal.vue:

<template>
  <v-layout row justify-center>
    <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>
<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

Как открыть диалог?

Автор: Tom Источник Размещён: 30.12.2017 03:33

Ответы (6)


1 плюс

5577 Репутация автора

в вашем App.vue templateдобавить это

<modal></model>

он отобразит ваш текущий Modal.vueшаблон с v-btnиv-dialog

теперь внутри него будет один button- Open Dialogкогда вы нажмете на эту модальную, откроется.

Автор: Hardik Satasiya Размещён: 30.12.2017 06:07

10 плюса

993 Репутация автора

Решение

Вы можете открыть диалоговое окно, используя настраиваемые события и используя шину событий для общения между родителями и детьми .

Если ваше приложение становится немного сложнее, я рекомендую вам использовать Vuex для управления состоянием .


Решение шины событий:

В вашем main.js или в новом файле создайте и экспортируйте новый экземпляр Vue:

export const bus = new Vue()

В app.vue импортируйте busи отправьте событие:

<template>
  <div>
    <button @click.prevent="openMyDialog()">my button</button>
  </div>
</template>

<script>
  import {bus} from '../main' // import the bus from main.js or new file
  export default {
    methods: {
      openMyDialog () {
        bus.$emit('dialog', true) // emit the event to the bus
      }
    }
  }
</script>

В modal.vue также импортируйте шину и прослушайте событие в созданном хуке:

<script>
  import {bus} from '../main'    
  export default {
    created () {
      var vm = this
      bus.$on('dialog', function (value) {
        vm.dialog = value
      })
    }
  }
</script>
Автор: Soleno Размещён: 30.12.2017 07:41

47 плюса

1871 Репутация автора

Шина событий не требуется и V-модель

Обновить:

Когда я впервые ответил на это, я разместил свой ответ как «обходной путь», так как в то время он не был полностью «правильным», и я был новичком в Vue.js. Я хотел открыть или закрыть диалог, используя директиву v-модели , но я не смог туда добраться. Через некоторое время я нашел, как это сделать в документации , используя событие ввода и свойство value , и вот как я думаю, что это должно быть сделано без шины событий.

Родительский компонент:

<template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true">    
   <ScheduleForm v-model="showScheduleForm" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

Дочерний компонент (ScheduleForm):

<template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: {
     value: Boolean
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (value) {
         this.$emit('input', value)
      }
    }
  }
}
</script>

Оригинальный ответ:

Я смог обойти это без необходимости в шине глобального события.

Я использовал вычисляемое свойство с геттером и сеттером. Так как Vue предупреждает вас об изменении свойства родителя напрямую, в установщике я просто отправил событие родителю.

Вот код:

Родительский компонент:

<template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true">    
   <ScheduleForm :visible="showScheduleForm" @close="showScheduleForm=false" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

Дочерний компонент (ScheduleForm):

<template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: ['visible'],
  computed: {
    show: {
      get () {
        return this.visible
      },
      set (value) {
        if (!value) {
          this.$emit('close')
        }
      }
    }
  }
}
</script>
Автор: Matheus Dal'Pizzol Размещён: 05.03.2018 08:35

8 плюса

4661 Репутация автора

Есть много способов сделать это, таких как Vuex, Event Bus, Props, с помощью которых вы можете управлять, должен ли модал открываться или закрываться. Я покажу вам мой любимый способ, используя .syncмодификатор:

Сначала я упросту ваш вопрос (часть кода)

Родительский компонент

<template>
   <div>
     <button @click="dialog=true">Open Dialog</button>
     <Child :dialog.sync="dialog" />
   </div>
</template>

<script>
import Child from './Child.vue'
export default {
    components: {
      Child
    },
    data: {
      return {
        dialog: false
      }
   }
}
</script>

Дочерний (Диалог) Компонент

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click.native="close">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>

  export default {
    props: {
        dialog: {
        default: false
      }
    },
    methods: {
        close() {
        this.$emit('update:dialog', false)
      }
    }
  }

</script>
Автор: roli roli Размещён: 18.04.2018 12:56

2 плюса

1330 Репутация автора

Самый простой способ сделать это:

в data () компонента, верните атрибут, скажем, диалоговое окно.

Когда вы включаете компонент, вы можете установить ссылку на свой компонентный тег. Например:

import Edit from '../payment/edit.vue';

<edit ref="edit_reference"></edit>

Затем внутри моего компонента я установил метод:

        open: function () {
            var vm = this;

            vm.dialog = true;
        }

Наконец, я могу вызвать его от родителя, используя:

  editar(item)
  {
      var vm = this;

      vm.$refs.edit_reference.open();
  }
Автор: Marco Размещён: 28.05.2018 06:53

2 плюса

7292 Репутация автора

Простой минимальный рабочий пример

codepen

Проходят valueпроп , как valueк v-dialogкомпоненту, и из диалога ребенка испускает inputсобытие всякий раз , когда вы хотите , чтобы закрыть его:

//CustomDialog.vue
<v-dialog :value="value" @input="$emit('input')">
  <v-btn color="red" @click.native="$emit('input')">Close</v-btn>
</v-dialog>
...
props:['value']

и добавить V-модель к родителю

//Parent.vue
<custom-dialog v-model="dialog">

Так что никакой заказной шины событий нет data, нет watch, нет computed.

Автор: Traxo Размещён: 06.05.2019 11:13
Вопросы из категории :
32x32