VueJS - nested data array to create buttons

Question

Looking for some help looping over an array to create buttons in multiple modal windows.

The first set of buttons works as intended (opens the first Modal window - which should list the next set of buttons) however after clicking the button - the nested array of options does not appear in the new modal window (it opens but it is empty). Any ideas how to get the optional buttons to appear when the previous button is clicked? My source is not returning any errors.

Javascript

new Vue({
  el: '#app',
  data: {
    showModal: false,
    showModal2: false,
    buttons: [
        { name: 'Furniture', 
            options:[
                { name: 'Add' },
                { name: 'Edit' },
                { name: 'Remove' }
            ]
        },
        { name: 'Cars', 
            options:[
                { name: 'Add' }
            ]
        },
    ]
    }
 }
)

HTML

<div id="app">
    <button v-for="item in buttons" id="show-modal" @click="showModal = true">{{ item.name }}</button>
        <modal v-if="showModal" @close="showModal = false">
            <h3 slot="header">What would you like to do?</h3>
                <h3 slot="body">
                    <button v-for="item in buttons.options" id="show-modal2" @click="showModal2 = true">{{ item.name }}</button>
                        <modal v-if="showModal2" @close="showModal2 = false">
                            <h3 slot="header">2nd Modal Window</h3>
                                <h3 slot="body">
                                </h3>
                        </modal>
                </h3>
        </modal>
</div>

stdob-- · Accepted Answer · 2018-04-16 18:36:58Z

2

When you click on the button of the first level, you must transfer its options to the modal window via an intermediate variable. For example:

<button v-for="item in buttons" 
        id="show-modal" 
        @click="(options = item.options) && (showModal = true)"
>{{ item.name }}</button>

[ https://jsfiddle.net/7hcwreob/ ]

answered Apr 16, 2018 at 18:36

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS - nested data array to create buttons

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related