Dynamic VueJS v-model binding target

Question

Dynamic VueJS v-model binding target

We are currently in the process of designing a form with numerous dependencies that span across different levels of inputs. For example, if parent1.input1 = 'test', then child1.input1 should also be 'test'. However, if child1.input2 = 'more test', then child1.input3 should equal '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>

I have managed to dynamically bind the v-model attribute, but I am struggling to achieve true dynamism between the current item's context and the parent data context. In other words, I want to be able to bind to a data property at any level within the data object, and I can't seem to find the correct syntax to accomplish this.

Check out the jsfiddle here

javascript vue.js binding

Answer 1

Answer №1

In Vue, you are able to access properties using strings in 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

In Vue, you are able to access properties using strings in 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 3

Answer №2

Here is the solution you are seeking:

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 4

Here is the solution you are seeking:

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 5

Answer №3

To ensure that 2-way binding only occurs between the parent and the first child in Vue, I intentionally separated them from the other children. This way, updates made by the children won't affect the parent component.

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].placePlaceholder" />
</div>

Answer 6

To ensure that 2-way binding only occurs between the parent and the first child in Vue, I intentionally separated them from the other children. This way, updates made by the children won't affect the parent component.

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].placePlaceholder" />
</div>

Dynamic VueJS v-model binding target

Answer №1

Answer №2

Answer №3

Similar questions

What are your thoughts on using a click function within the same tag as an ngFor directive in Angular and JavaScript?

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Utilize Knockout.js to generate a table based on a Json response

An error has been noticed: "Unexpected token o" - Syntax is not

Ingress-nginx rewriting destination target

obtain access token using JavaScript

Node.JS: Ensuring a process has completed before moving on

Steps for showing personalized validation error messages in Angular 7

The data display in MUI-Datatable is experiencing an issue where it is unable to read properties of undefined, specifically when trying to split the data

What is the method for selectively applying a "fade to black" mask to an input field?

There was an unexpected error in angular.js while trying to work on a calendar widget based on angular-ui-calendar. The error message indicated that the argument 'fn' was expected to be a function but instead received Moment

The error message "Cannot access 'id' property of undefined" is being displayed

Running a Node.js server on a public IP address while utilizing socket.io

In the event that the get request fails, go ahead and clear the

Showing pictures from a JSON source

Blurry text and icons in Bootstrap 3

Troubleshooting a React JS and material-ui issue

Double Marker Challenge in Brochure

Listening for server updates with jQuery

Could implementing a click/keydown listener on each cell in a large React datagrid with thousands of cells impact performance?