CODEWITHSUNDEEP
javascripthtmlvue.js
Jukebox
Jukebox

Reputation: 103

VueJS - nested data array to create buttons

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>

Upvotes: 1

Views: 990

Answers (1)

stdob--
stdob--

Reputation: 29167

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/ ]

Upvotes: 2

Related Questions