vue v-model 的问题

场景:
父组件 传一个
{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 传入,

阅读 614
评论
    4 个回答

    子组件

    <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
        }
      }