时间戳

首页 > 解决方案 > 如何使用 json 在 vue 中创建嵌套表单？

forms - 如何使用 json 在 vue 中创建嵌套表单？

问题描述

在 Vue 中，如何创建嵌套在可选对象中的表单？

嵌套表单必须基于从下拉列表中选择的值显示。

我怎样才能做到这一点？

标签： formsvuejs2dropdown

解决方案

Vue 让这种事情变得更简单，但你马上就会遇到如何在组件之间进行通信的问题。有事件和道具以及各种各样的东西，但最好的方法是拥有一个全局状态对象。在下拉列表中选择的值是表单需要的，所以它是共享状态，所以它进入全局存储。然后表单只是看商店看是否显示自己。代码工作...

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/vue@2.5.16/dist/vue.js"></script>
<div id='vueRoot'>
  <my-ddown></my-ddown>
  <br>
  <my-form></my-form>
</div>

推荐阅读