Dinamically modify data in Vue instance based on input element

Question

I'm a beginner with Vue and JS and I'm struggling to update the Vue instance's data attribute based on user input. This is what I have as the template for the Vue component (located inside taskTemplate variable):

<div>
  <input type="text" placeholder="Insert your task" v-model="desc"/>
  <p>{{ desc }}</p>
</div>

The Vue component is defined as follows:

Vue.component("task-item", {
  props: {
    id: Number,
    desc: String,
  },
  template: taskTemplate
});

And this is populated in the HTML as follows:

<div id="task-list">
  <task-item
    v-for="item in taskList"
    v-bind="item"
  ></task-item>
  <div id="add-more">
    <button v-on:click="newTask" type="button">Add a new task</button>
  </div>
</div>

Where the task list is created with the Vue instance:

var app = new Vue({
  el: "#task-list",
  data: {
    taskList: [
      { id: 1, desc: "" },
      { id: 2, desc: "" },
    ]
  },
  methods: {
    newTask() {
      this.taskList.push({ id: this.taskList.length + 1, desc: "" })
    }
  }
});

My problem is that after updating the input element in the webpage, the component's property gets updated, but if I type in the console app.taskList[0].desc it still returns an empty string.

The end goal is to send the data the user has introduced in an API call, so if I can access Vue components instead of the taskList within the data property it is still ok. I would like to know the best practices here as well.

You should not be mutating props: you should’ve gotten a warning in your browser console. Instead, make your task item component emit changes to the parent where the source of data lies. See: vuejs.org/v2/guide/components.html#Using-v-model-on-Components — Terry
– Terry, Commented Sep 18, 2021 at 9:41

Igor Moraru · Accepted Answer · 2021-09-18 10:25:09Z

1

Props shouldn't be used in a two-way binding. Instead, bind their value to input :value, and emit any changes to the parent component.

<div>
  <input 
     type="text" 
     placeholder="Insert your task" 
     :value="desc"
     @input="$emit('update:desc', $event.target.value)"
  />
  <p>{{ desc }}</p>
</div>

In the parent component then you have to listen to update event and update the source value:

<div id="task-list">
  <task-item
    v-for="item in taskList"
    :key="item.id" // do not forget about key
    v-bind="item"
    @update:desc="item.desc = $event"
    // or you can use the sync modifier to listen to update events for all item's props.
    // v-bind.sync="item"
  ></task-item>
  <div id="add-more">
    <button v-on:click="newTask" type="button">Add a new task</button>
  </div>
</div>

edited Sep 18, 2021 at 10:25

answered Sep 18, 2021 at 10:01

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

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

Comments

Nikola Pavicevic · Accepted Answer · 2021-09-18 10:19:14Z

Try to use :value and @input instead v-model :

Vue.component('task-item', {
  template: `
    <div>
      <input type="text" 
             placeholder="Insert your task" 
             :value="desc"
             @input="$emit('update', $event.target.value)"/>
      <p>{{ desc }}</p>
    </div>
  `,
  props: {
    id: Number,
    desc: String,
  },
  //template: taskTemplate
})

new Vue({
  el: '#demo',
  data: {
    taskList: [
      { id: 1, desc: "" },
      { id: 2, desc: "" },
    ]
  },
  methods: {
    newTask() {
      this.taskList.push({ id: this.taskList.length + 1, desc: "" })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div id="task-list">
    <task-item
      v-for="(item, index) in taskList"
      :key="index"
      v-bind="item"
      @update="item.desc = $event"
    ></task-item>
    <div id="add-more">
      <button v-on:click="newTask" type="button">Add a new task</button>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Dinamically modify data in Vue instance based on input element

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