In Vue, how do I create a form nested in an optional object?
The nested form has to be shown based on the selected value from a dropdown.
How can I achieve this?
-
Will this help? stackoverflow.com/questions/44140365/…Adriano– Adriano2018-08-01 07:22:44 +00:00Commented Aug 1, 2018 at 7:22
Add a comment
|
1 Answer
Vue makes this kind of thing much simpler, but straight away you're into the question of how to communicate between components. There are events and props and all kinds of things, but the best way is to have a global state object. The value selected in the dropdown is needed by the form, so it's shared state, so it goes in the global store. Then the form just looks at the store to see whether to show itself. Code working...
var vueStore = {
ddSelection : null
}
Vue.component('my-form',{
inject: ['vueStore'],
template : `
<form v-if='vueStore.ddSelection === "showForm"'>
<input type='text' placeholder='tell me everything'/>
</form>
`
});
Vue.component('my-ddown',{
inject: ['vueStore'],
template : `
<select v-model='vueStore.ddSelection'>
<option value='dontShowForm'>Don't show the form</option>
<option value='showForm'>Show the form</option>
</select>
`,
});
var vm = new Vue({
data: {vueStore: vueStore},
el: '#vueRoot',
provide: {vueStore : vueStore}
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id='vueRoot'>
<my-ddown></my-ddown>
<br>
<my-form></my-form>
</div>