how to v-model on different array vue 3

Question

Hi I was trying to use a v-model an input to a value in object in an array of object in Vue 3. The complexity lies in the fact the object is first processed by a function. And that it need to be processed every time when a change is made to an input. Here is my code (and a sandbox link) :

<template>
  <div id="app">
    <div v-for="param in process(parameters)" :key="param">
    Name :   {{param.name}} Value : <input v-model="param.value">
    </div>
    {{parameters}}
  </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'}
      ]
    }
  },
  methods:{
    process(parameters){
      const results = parameters.map( param =>{
        return {name:param.name+' extra text',
                value:param.value+' extra text',
                }
      })
      return results
    }
  }
};
</script>

I just want the original parameters to change when something is types in the inputs. Maybe @change could be of use. But I didn't find a fix with @change. Does anyone know a solution to my problem? Thanks in advance.

Have you tried using a computed method to do the processing and return your data instead of an actual method? — incutonez
– incutonez, Commented Mar 2, 2022 at 22:50

Rohìt Jíndal · Accepted Answer · 2022-03-03 09:12:52Z

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>

answered Mar 3, 2022 at 9:12

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

Comments

aymcg31 · Accepted Answer · 2022-03-03 08:38:40Z

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.

Collectives™ on Stack Overflow

how to v-model on different array vue 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related