Dynamic v-model using v-for value + string in VueJS 2

Question

In my JavaScript I have:

data: {
    rooms: [
         {type: 'single'},
         {type: 'double'}
         ...
    ],
    selectedSingle: 0,
    selectedDouble: 0,
    ...
},
computed: {
    capitalize: function(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
}

In HTML I have:

<li v-for="(room, index) in rooms">
    <input type="number" v-model="'selected' + capitalize(room.type)">
</li>

The problem is that I can't find a way to access my models in this way, and the only way I see now is to destroy the v-for and make it manually, but it's not the best solution because I have many "rooms". Any ideas are welcome.

acdcjunior · Accepted Answer · 2018-04-18 14:37:06Z

21

You are attempting to access a data property via string. For that you can use the object access property notation (obj['propname']) using $data as the object:

<input type="number" v-model="$data['selected' + capitalize(room.type)]">

Plus your computed should really be a method:

  methods: {                                // changed from computed to method
    capitalize: function(string) {

Demo:

new Vue({
  el: '#app',
  data: {
    rooms: [
      {type: 'single'},
      {type: 'double'}
    ],
    selectedSingle: 111,
    selectedDouble: 222,
  },
  methods: {                                // changed from computed to method
    capitalize: function(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="(room, index) in rooms">
      <input type="number" v-model="$data['selected' + capitalize(room.type)]">
    </li>
  </ul>
</div>

answered Apr 18, 2018 at 14:37

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Catalin Farcas Over a year ago

Works perfect. Exactly what i need. Thanks

acdcjunior Over a year ago

Great! Here are the vm.$data api docs for future reference.

eysikal Over a year ago

@acdcjunior I had the same issue and this helped me! But if I'm honest, I'm not really sure what's going on here. Why is it necessary to use $data? Why doesn't room.type work?

acdcjunior Over a year ago

@eysikal $data represents the whole data: { object. This is the only "vue-specific" thing here. Other than that, it's just regular JavaScript property accessing via brackets notation

eysikal Over a year ago

Ok. I think I understand now. It looks like v-model="" is expecting a raw string, not a variable. So using v-model="room.type" will not not work. I tried binding to v-model as so: :v-model="room.type" - but that also does not work. Using v-model="$data[room.type]" will return the string the from the room.type variable and will set the v-model attribute dynamically, which is what we're after. I'm not entirely clear on why using $data allows us to return the value rather than $data being interpreted as a raw string, but I'm glad this works. Thanks for the help.

Yi Feng Xie · Accepted Answer · 2020-11-28 08:13:40Z

2

For people who are using Vue 3, use this instead of $data.

For example:

import { reactive, createApp } from 'vue';

createApp({
  setup() {
    const state = reactive({
      propertyA: 'valueA',
      propertyB: 'valueB',
    });
    return state;
  };
});

<input v-for="p in ['propertyA', 'propertyB']" v-model="this[p]">

answered Nov 28, 2020 at 8:13

Yi Feng Xie

5,1271 gold badge28 silver badges31 bronze badges

Collectives™ on Stack Overflow

Dynamic v-model using v-for value + string in VueJS 2

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related