This application uses Vue.js.
I'm using Vuetify.

I am creating a UI like this.
Click "ADD SKILL" button to display the dialog (the corresponding source and the dialog image are listed below).

I want to display a dialog when I tap a chip such as iOS or Vue
However, I would like to give advice without knowing how to do it.

When you open a dialog by tapping Chip, you need to pass a value to the dialog, but I think that props should be supported.

Source code

Components using dialogs

              <v-chip color = "primary" text-color = "white">iOS</v-chip>
              <v-chip color = "secondary" text-color = "white">Swift</v-chip>
              <v-chip color = "red" text-color = "white">Vue</v-chip>
              <v-chip color = "green" text-color = "white">Python</v-chip>
            <!-component to open the dialog->
            <app-edit-skill-dialog />

Dialog components

  <v-dialog v-model = "editSkillDialog" persistent max-width = "500px">
    <v-btn slot = "activator" color = "primary" dark&​​gt;Add Skill</v-btn>
        <v-layout wrap>
            <v-flex xs12>
              <v-flex md-5>
                  label = "Skill"
                  hint = "input skill name"
                hint = "select skill level"
                thumb-label = "always"
        <v-btn color = "blue darken-1" flat @ click.native = "editSkillDialog = false">Cancel</v-btn>
        <v-btn color = "blue darken-1" flat @ click.native = "editSkillDialog = false">Save</v-btn>
  export default {
    data () {
      return {
        editSkillDialog: false
    computed: {
    watch: {
    methods: {

The dialog looks like this.

  • Answer # 1


    Open a Vuetify dialog from a component template in VueJS

Related articles