0

场景:
父组件 传一个
{A:{B:" " } }和一个 path:"A.B"
给一个子组件,子组件作为一个base组件 ,会有很多组件引用,作用是 根据path来v-model 到一个<input />,比如当前场景就是把 B v-model 到一个input
尝试了 method 和 计算属性, 但是v-model 无法挂method (实际上纯js情况下发现可以,但是使用vue-cli搭建的项目需要编译的话 发现编译不通过), 而计算属性无法传参数,
所以无法解决中情况,

==========

原谅我上班时间 描述没有描述清楚 ,我再改下问题描述:
父组件:

父组件:
<son :formData="XX" :config="config"> </son>
data:{
    AA:{BB:1}
    DD:{EE:{FF:11}}
}
config:[
    {path:AA.BB},
    {path:DD.EE.FF}
]

子组件:

<div v-for=item in config>
    <input > </input>     //在这个地方想根据path 来绑定data中的值
</div>

我卡在一个问题是 我想要用计算属性,但是计算属性没办法传参,导致在v-for中没办法把item 传入,

查看全部 4 个回答

1

已采纳

子组件

<input v-model="value" > </input>
computed: {
   value: {
     get() {
         return this.getVal(this.formData,this.path)
     },
     set(val) {
       this.formData[this.path] = val;
     }
   }
},
methods:{
    getVal(obj,key){
       let subItem = this.path.split('.')
       let val= JSON.parse(JSON.stringify(obj))
       for(let k of subItem ){
          val= val[k]
       }
       return val
    }
}

父组件

<son :formData="XX" :path="path" > </son>

补充

其实楼主的问题跟父子组件没关系,同样通过计算属性就可以完成。

  <div v-for="item in myConfig">
    <input v-model="item.model"></input>
  </div>
myConfig:{
    get(){
      return this.config.map(c=>{
        return {model:this.getVal(this.formData,c.path)}
      })
    },
    set(){
        //同理写个setVal
    }
  }

推广链接