[Vuejs]-Vue – Dynamically add specific v-model name with v-for, not just an index

by

0👍

I think that’s because you’ve defined strings inside of that color array. You should refer to these items like this:

 myModels: {
     color: [this.headerColor, this.checkboxColor]
 },

0👍

I hope this helps. in a v-for for some reason I cannot access the name from an array, but I can if I access the data by key from ANOTHER object. No idea why, but it worked! Here is the fixed code:

<v-card
  v-for="(colorMenu, index) in colorMenus"
  :key="index"
>
  <v-row>
    <v-col>
      <p class="font-weight-bold text-subtitle-2 mt-4">{{ colorMenu.title }}</p>
    </v-col>
    <v-col cols="8">
      <v-text-field 
        v-model="myModels[colorMenu.type]"
        v-mask="mask" 
        hide-details 
        class=""
        solo
      ></text-field>
    </v-col>
  </v-row>
</v-card>

And then my data:

  export default {
    data() {
    return {
      headerColor: '#1976D2FF',
      checkboxColor: '#1976D2FF',
      myModels: {
        headerColor: '#1976D2FF',
        checkboxColor: '#1976D2FF',
      },
      colorMenus: [
        {
          title: 'HEADER:',
          type: 'headerColor'
        },
        {
          title: 'CHECKBOX:',
          type: 'checkboxColor'
        }
      ]
        }
    },

0👍

How about using computed property? This works, you can try it out here

https://codesandbox.io/s/optimistic-herschel-7q4u54?file=/src/App.vue

data() {
  return {
    headerColor: "#1976D2FF",
    checkboxColor: "#1976D2FF",
  };
},

computed: {
  myModels() {
    return [this.headerColor, this.checkboxColor];
  },
},

Leave a comment