时间戳

首页 > 解决方案 > 如何处理 Vue.js 中数据中多层 JSON 的设置值

javascript - 如何处理 Vue.js 中数据中多层 JSON 的设置值

问题描述

data这是我的 Vue 组件中的一个表单childEle：

data:{
  form:{
    root1:Number,
    root2:{
      child1:[],
      child2:{},
      child3:String
    },
    root3:[],
    root4:{
      child4:string,
      child5:[]
    }
  }
}

这是一个非常复杂的JSON Object. 由于它是与 in 一起出价的form，iView因此似乎不可能将其变平JSON Object。现在，一旦我打开这个组件（实际上它是一个Modal），我需要为这个表单设置值，所以我通过以下方式从父元素传输值props：

props:{
  outForm:{
    type:Object,
    default: function () {
      return {}
    }
  }
  ……
}

并为其添加属性watch：

watch:{
  outForm(val){
    this.form = val
  }
}

现在出现了问题。我还绑定了一个value属性来控制是否显示Modal，但是当我将值传递给value属性时， valueindata没有改变，Modal即使我调用了它也无法关闭this.$forceUpdate()。如何处理？感谢您的帮助！

标签： javascriptvue.js

解决方案

您对显示或隐藏模态的控制不需要保留在模态组件中。

一个选项是威胁模式始终处于活动状态，并使用父级内部的 v-if 条件来控制它，例如在名为 的变量中showModal。

因此，当用户执行显示模式的操作时，父级设置为 true，另一方面，模式会发出关闭事件 ( this.$emit('close'))，在父级 ( <child-component @close="hideModal" />) 中捕获并设置showModal为 false。

但是，如果您确实需要将此变量放入表单中，那么深度反应性可能会有所帮助

推荐阅读