Why is my bulma modal not displaying when data is set to true? (Vue.js)
AKL012
New to Vue.js and bulma. I am trying to get a modal pop up to work, so far I have this from including the modal component in the main App.vue file:
<template lang="pug">
div#app
navigation-menu
menu-modal
transition(name="fade")
router-view
</template>
I only want the modal to show if the data is set to true here (still in App.vue, inside the script tags):
export default {
name: 'app',
components: {
NavigationMenu, MenuModal
},
data: {
showModal: true
}
}
I tried adding this inside the template tags (Vue.js):
But the modal just disappeared from the page, even when showModal is set to true in data.
Any idea how to make the modal appear when data is set to true and disappear when set to false?
thanksd
You are specifying a data property, which will work a single Vue instance, but not on a Vue component. See the Beginner Gotchas Page.
You should specify a data method which returns an object with showModal set to true:
data() {
return {
showModal: true
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: R: Interpolate + Extrapolate over borders - with data.table?
- Next: Ruby sort by object's attribute based on keyword string
Related
Related Related
- 1
Ember.js - why is my View with inline template not displaying?
- 2
Bootstrap Modal Not Displaying, outputs JS
- 3
Why is my email button border is displaying two colors, when the border-color is set to only display one?
- 4
Why is Firebase data not displaying properly in my Ember CLI generated output?
- 5
Why isn't my JS code displaying the message to the HTML page?
- 6
why is my image not displaying?
- 7
Why is my JS not working when set to 'onLoad' but works when set to 'No wrap - in <body>'?
- 8
PHP & MySQLi OOP - Why is my logged in variable not being set to true?
- 9
Why is my app crashing when I set DisplayHomeAsUpEnabled to true?
- 10
Why my alert function is not working when I click on button in Vue.js
- 11
Why my first load data axios is return 404 Vue Js?
- 12
Why is Excel removing leading zeros when displaying CSV data?
- 13
My thread seems to locks forever when JDialog is created with modal set to true?
- 14
ScrollView/TextView not displaying all data when layout_gravity is set
- 15
PHP & MySQLi OOP - Why is my logged in variable not being set to true?
- 16
vue.js Bootstrap Modal Data Bind Fails
- 17
Why my alert function is not working when I click on button in Vue.js
- 18
Why is my Line Chart not displaying (Chart.JS)?
- 19
Vue.js: Why won't my data display in this list containing multiple component types?
- 20
Why when my modal opens, the background is darkened?
- 21
Why is my bar chart not displaying (Chart.js)?
- 22
How bind data in vue.js when my key consists dash (-) in JSON data?
- 23
prevent displaying component until data loaded with Vue.js
- 24
Vue Js running code when Modal has been oepend
- 25
Why are my bulma columns wrapping, despite not having is-multiline set?
- 26
Vue.js 2: Modal Dialog - close when Method is successful
- 27
bootstrap-vue modal not displaying
- 28
Vue.js why my watcher is not working?
- 29
Vue JS Load dynamic Data issue with Modal
Comments