Home>
Assumptions

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-card>
          <v-card-text>
            <h2>Skill</h2>
            <div>
              <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>
            </div>
          </v-card-text>
          <!-Edit->
          <v-card-actions>
            <v-spacer></v-spacer>
            <!-component to open the dialog->
            <app-edit-skill-dialog />
          </v-card-actions>
        </v-card>

Dialog components

<template>
  <v-dialog v-model = "editSkillDialog" persistent max-width = "500px">
    <v-btn slot = "activator" color = "primary" dark&​​gt;Add Skill</v-btn>
    <v-card>
      <v-card-text>
        <v-layout wrap>
            <v-flex xs12>
              <v-flex md-5>
                <v-text-field
                  label = "Skill"
                  hint = "input skill name"
                ></v-text-field>
              </v-flex>
              <h2>Level</h2>
              <v-slider
                always-dirty
                hint = "select skill level"
                persistent-hint
                thumb-label = "always"
              ></v-slider>
            </v-flex>
        </v-layout>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <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>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
  export default {
    data () {
      return {
        editSkillDialog: false
      }
    },
    computed: {
    },
    watch: {
    },
    methods: {
    }
  }
</script>

The dialog looks like this.

  • Answer # 1

    Solved.

    Open a Vuetify dialog from a component template in VueJS

Related articles