VueJS 动态 v-model 目标

Question

我们正在创建一个表单，该表单通过输入的多个级别具有多个依赖项。所以如果parent1.input1 = 'test'，那么child1.input1 应该等于测试。但是如果child1.input2 = 'more test'，那么child1.input3应该等于'more test'。

let v = new Vue({
  el:'#someEl',
  data:{
    parentval1:'foo',
    parentVal2:'bar',
    children:[
      {childVal1:'bax', modelAttr:'parentVal1'},
      {childVal2:'bix', modelAttr:'childVal1'},
      {childVal3:'boom', modelAttr:'childVal2'}
    ]
  },
  methods:{
    whichModelField(modelAttr){
      swith (modelAttr){
        case 'parentVal1':
          return xx; //should be bound to some data property if modelAttr === 'parentVal1'
          case 'childVal1':
           return yy; //should be bound to some other data property if modelAttr === 'childVal1'
      }
    }
  }
})

<div>
  <p id='parent'>
    <input id="1" placeholder="test" v-model="parentVal1"/>
  </p>
  <p id='child1' v-for="child in children">
    <input  placeholder="test" v-model="whichModelField(child.modelAttr)"/>
    
  </p>
</div>

我已经弄清楚如何动态绑定v-model attr 但是，我无法弄清楚如何使其在当前项目的上下文和父数据上下文（松散意义上的上下文）之间真正动态化。 IOW，我希望能够在数据对象的任何级别绑定到数据属性，但我无法弄清楚实现它的语法。

jsfiddle

Answer 1

Vue 仍然是 Javascript - 您可以使用字符串访问属性

let v = new Vue({
  el:'#someEl',
  data(){
    const self = this
    return {
    parentval1:'foo',
    parentVal2:'bar',
    children:[
      {childVal1:'bax', modelAttr:'parentVal1'},
      {childVal2:'bix', modelAttr:'childVal1'},
      {childVal3:'boom', modelAttr:'childVal2'}
    ],
    whichModelField: {
      get parentVal1(){
           return self.parentval1
      },
      set parentVal1(val){
           self.parentval1 = val
      },
      get childVal1(){
        return self.children[0]['childVal1']
      },
      set childVal1(val){
        self.children[0]['childVal1'] = val
      },
      get childVal2(){
        return self.children[1]['childVal2']
      },
      set childVal2(val){
        self.children[1]['childVal2'] = val
      }
      
    }}
  }
})

.as-console-wrapper {
  height: 0px !important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="someEl">
  <p id='parent'>
    <input id="1" placeholder="test" v-model="whichModelField['parentVal1']"/>
  </p>
  <p id='child1' v-for="child in children">
    <input  :placeholder="child.modelAttr" v-model="whichModelField[child.modelAttr]"/>
    
  </p>
</div>

Answer 2

我将第一个孩子和其他孩子分开，因为您只想在第一个孩子的父母中进行双向绑定，您不希望孩子们会更新父母：

new Vue({
  el:'#app',
  data:{
    parent:'foo',
    child:'bar',
    children:[
      {placeHolder:'bax'},
      {placeHolder:'bix'},
      {placeHolder:'boom'}
    ]
  },
  watch:{
      parent: function(value){debugger; this.child = value}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input id="1" v-model="parent" placeholder="test"/>
  <input v-model="child"
         :id="0"
         :placeholder="children[0].placeHolder" />

  <input  v-for="i in children.length - 1"
         :value="child"
         :id="i + 1"
         :placeholder="children[i].placeHolder" />
</div>

Answer 3

这是你要找的吗：

new Vue({
    el:'#app',
    data:{
        parent:'',
        child:''
    },
    watch:{
        parent: function(value){this.child = value}
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p id='parent'>
    <input id="1" placeholder="test" v-model='parent'/>
  </p>
  <p id='child1'>
    <input id="1" placeholder="test"  v-model='child' :value='parent'/>
    <!-- 1 and parent>input#1 should be bound to same value -->
    <input id="2" placeholder="more test" :value='child'/>
    <!-- 2 and 3 should be bound to same value -->
    <input id="3" placeholder="more test" :value='child'/>
  </p>
</div>