Question

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

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

我该如何实现？

Answer 1

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>

如何在Vue中使用json创建嵌套表单？

1 个答案: