mirror of
https://github.com/derron1/mpsfun.git
synced 2026-01-11 18:04:34 +00:00
46 lines
1.2 KiB
Vue
Executable File
46 lines
1.2 KiB
Vue
Executable File
<template>
|
|
<div class="row">
|
|
<div class="medium-10 medium-offset-1 columns">
|
|
<h1>{{ msg }}</h1>
|
|
<ul id="accordion" class="accordion" data-accordion>
|
|
<li class="accordion-item is-active" data-accordion-item>
|
|
<a href="#" class="accordion-title">Accordion 1</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
If you init Foundation in the component, this will work fine.
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Accordion 2</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
I need to be clicked, in order to show up.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'accordion',
|
|
mounted() {
|
|
this.accordion = new Foundation.Accordion($('#accordion'), {
|
|
// These options can be declarative using the data attributes
|
|
slideSpeed: 500,
|
|
multiExpand: true,
|
|
});
|
|
},
|
|
data() {
|
|
return {
|
|
msg: 'Accordion',
|
|
};
|
|
},
|
|
destroyed() {
|
|
this.accordion.destroy();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|