<template> <div> <v-expansion-panel> <v-expansion-panel-content v-model="item.active" v-for="item in items" :key="item.title" :prepend-icon="item.action" :ddd="item.ddd" no-action> <div slot="header">{{ item.title }}</div> <v-card v-for="subItem in item.items" :key="subItem.title"> <a href="#" @click.stop="dialog = true"> <v-card-text >{{ subItem.title }}-{{ subItem.ddd }} </v-card-text></a> </v-card> </v-expansion-panel-content> </v-expansion-panel> <v-dialog v-model="dialog" max-width="500px"> <v-card> <v-card-title class="headline">Use Google's location service?</v-card-title> <v-card-text>{{subItem.ddd}}</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> </div> </template> <script> export default { data () { return { dialog: false, items: [ { action: 'local_activity', title: 'Attractions', items: [ { title: 'List Item' } ] }, { action: 'restaurant', title: 'Dining', items: [ { title: 'Breakfast & brunch', ddd: '1234' }, { title: 'New American', ddd: '5678' }, { title: 'Sushi', ddd: '91011' } ] }, { action: 'school', title: 'Education', items: [ { title: 'List Item' } ] }, { action: 'directions_run', title: 'Family', items: [ { title: 'List Item' } ] }, { action: 'healing', title: 'Health', items: [ { title: 'List Item' } ] }, { action: 'content_cut', title: 'Office', items: [ { title: 'List Item' } ] }, { action: 'local_offer', title: 'Promotions', items: [ { title: 'List Item' } ] } ] } } } </script>
  • If you answered my answer, please tick it with a green check mark. If you don't, let me know - Yernar
  • @Yernar Thank you so much for the answer! I swore Lint in VS for obj: null - 'types' can only be used in a .ts file .. I haven't figured it out yet. How come I will definitely mark the daw. - Andrey
  • Try instead of obj: null put obj: {} - Yernar
  • @Yernar C obj figured out, but now Cannot read property 'ddd' of undefined, as before. - Andrey
  • If {{obj.ddd}} changes to {{ddd}}, then modal windows load but do not open - Andrey

1 answer 1

Because the v-dialog does not have access to the subItem . Since the v-dialog is outside the v-for loop. To fix this, you can do this:

  1. @click.stop="dialog = true" change to @click.stop="changeState(subItem)"

  2. In the export default add the following code:

     methods: { changeState(subItem) { this.obj = subItem } }

  3. In data() add this: obj: null

  4. In your v-dialog instead of {{ subItem.ddd }} put {{ obj.ddd }}

Also, not all your items have ddd

PS Questions about vue.js best written in stackoverflow English. Since there are not very many Russian vue.js developers

  • <a href="#" @click.stop="changeState(subItem)"> <script> export default {computed: {changeState (subItem) {this.obj = subItem}}, data () {obj: null return { dialog: false, items: [{action: 'local_activity', title: 'Attractions', items: [{title: 'List Item', ddd: '1234'}] - Andrey