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 BUT的方法，但是我无法弄清楚如何使它在当前项目的上下文和父数据上下文（从广义上来说是上下文）之间真正地动态。。 IOW，我希望能够在数据对象的任何级别上绑定到data属性，并且我无法弄清楚这样做的语法。

jsfiddle

Answer 1

这是您要寻找的东西吗

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>

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

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>

VueJS动态v模型目标

3 个答案: