Javascript 按字符串路径设置嵌套对象属性

我有3个选择框，我想让他们重置选择上的某个字段。如何使其动态化，以便可重用

以下是我的代码摘录：

v-on:select="getDate('{{ route('api.v1.get.date') }}', 'input1', ['form.company.input2', 'form.company.input3'], $event)"

getDate(url, obj, obj2, event){

     let current = this

     current[obj] = ''
     current[obj2[0]] = ''
     current[obj2[1]] = ''

}

---

当

obj

位于Vue实例的根级别时（即

current[obj]

），它会正确设置属性；但当

obj

是嵌套对象时，则不适用。

尝试使用

此。$set

函数，如下所示：

  this.$set(current,obj,'');
 this.$set(current,obj2[0],'');
 this.$set(current,obj2[1],'');

了解有关JavaScript中的函数的更多信息，不要允许嵌套对象路径，这是点分隔字符串中的函数。通过使用该字符串，实际上是在根Vue实例上创建属性，而不是设置嵌套属性，类似如下所示：

this['form.company.input2'] = ''  // XXX: creates `form.company.input2` prop
this.form.company.input2 = ''     // sets `input2`

要按路径设置对象值，可以创建一个方法，该方法使用对象路径通过

此

导航当前Vue实例的数据属性：

方法：{
getDate（url、obj、obj2、事件）{
此.setValue（对象“”）
此.setValue（obj2[0]，“”）
此.setValue（obj2[1]，“”）
},
设置值（路径、值）{
让obj=这个
const parts=path.split（“.”）
while（parts.length>1&&obj.hasOwnProperty（parts[0]））{
obj=obj[parts.shift（）]
}
obj[零件[0]]=值
}
}

newvue({
el:“#应用程序”，
数据（）{
返回{
input1:“input1”，
表格：{
公司：{
input2:“input2”，
input3:“input3”
}
}
}
},
方法：{
getDate（url、obj、obj2、事件）{
此.setValue（对象“”）
此.setValue（obj2[0]，“”）
此.setValue（obj2[1]，“”）
},
设置值（路径、值）{
让obj=这个
const parts=path.split（“.”）
while（parts.length>1&&obj.hasOwnProperty（parts[0]））{
obj=obj[parts.shift（）]
}
obj[零件[0]]=值
},
路线（道具）{
回程道具
}
}
})

重置数据

此库允许您使用嵌套对象路径

您的摘录如下所示：

v-on:select="getDate('{{ route('api.v1.get.date') }}', 'input1', ['form.company.input2', 'form.company.input3'], $event)"

getDate(url, obj, obj2, event){

     let current = this

     current.$op.set(obj, '')
     current.$op.set(obj2[0], '')
     current.$op.set(obj2[1], '')

}

---

用于在路径为

字符串的
对象中获取或设置
嵌套值

function getNestedValue(obj, path){
    return path.split('.').reduce((o,i)=> o[i] || '', obj)
}

function setNestedValue(obj, path, value) {
    let i;
    path = path.split('.');
    for (i=0;i<path.length-1;i++) obj = obj[path[i]];
    obj[path[i]] = value
}

const obj = { a:{ b: [{c: 1 },{ d: 2 }] }}

setNestedValue(obj,'a.b.0.c',3)
console.log(getNestedValue(obj, 'a.b.0.c'))  // 3

函数getNestedValue（obj，路径）{
返回路径.split（'..）.reduce（（o，i）=>o[i]| |“”，obj）
}
函数setNestedValue（对象、路径、值）{
让我；
path=path.split（'.'）；
对于（i=0；iSeems，我在使用set方法时遇到此错误，数据已设置，但仍会出现此错误“[Vue warn]：避免在运行时向Vue实例或其根$data添加反应性属性-在数据选项中预先声明它。”
current[obj]
是通过道具传递的吗？该函数在同一个实例中，我通过v-select“form.compay.input2”@KarlWong无问题：）