[Vuejs]-How to v-model on different array vue 3

by

2👍

✅

Use computed property to get reactive state of the data.

Working Demo :

new Vue({
  el: '#app',
  data: {
    parameters :[
      {'name':'Richard Stallman','value':'cool dude'},
      {'name':'Linus Torvalds','value':'very cool dude'},
      {'name':'Dennis Ritchie','value':'very very cool dude'}
    ]
  },
  computed: {
    process() {
      const results = this.parameters.map((param) => {
        return {
            name: param.name + ' extra text',
          value: param.value + ' extra text'
        }
      });
      return results;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="param in process" :key="param">
    Name : {{param.name}}
    Value : <input v-model="param.value">
  </div><br>
  <strong>Orinigal Data :</strong> {{parameters}}
</div>
👤Debug Diva

1👍

I am not entirely sure I understood whether the person should be able to see/edit the text you added within you processing method.

Anyway, I think this sample of code should solve you problem :

<template>
  <div id="app">
    <div v-for="param in parameters" :key="param.name">
      Name : {{ param.name }} Value : <input v-model="param.value" />
    </div>
    {{ process }}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      parameters: [
        { name: "Richard Stallman", value: "cool dude" },
        { name: "Linus Torvalds", value: "very cool dude" },
        { name: "Dennis Ritchie", value: "very very cool dude" },
      ],
    };
  },
  computed: {
    process: function() {
      const results = this.parameters.map((param) => {
        return {
          name: param.name + " extra text",
          value: param.value + " extra text",
        };
      });
      return results;
    },
  },
};
</script>

So, we’re iterating through the parameters array directly, adding an input on the value just like you did.
When you type in the input, you update the parameter linked to it, in live.

I just switched the method you made into a computed method.
This way, every time parameters is updated, "process" is also updated because it’s depending on it directly.

I also removed passing the "parameters" argument, it’s in the component data, you can just access it directly.

This way, using "process" just like any variable, you’ll always have the updated parameters + what you added to em.

👤aymcg31

Leave a comment