Error while Updating the list item in Vuejs

Question

Hi All,

I have created a simple CRUD operation in VueJS. The values are inserting in a list , i can read it from there only and also can delete it from the list. But issue is when i am trying to update any value, its not getting update. Can any one help me out with it. Am i doing anything wrong. Please let me know.

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>    
</head>
    <body>
    <div id="app">
        <form v-on:submit.prevent="addToDo">
            <input v-model="currentTodos" type=text><br><br>
            <button type="submit">Add To List</button>
        </form>
        <ul>
            <li v-for="(todo, index) in todos">
                {{todo}}<button v-on:click="deleteItemFromList(index)">X</button><button v-on:click="updateItemList(index)">#</button>
            </li>
        </ul>
    </div>
    <div v-html="htmlContent"></div>    
    </body>
    <script>
        new Vue({
            el: "#app", // el is the DOM element.
            data:{
                 todos:['push', 'pop', 'paste'],
                 currentTodos: '',
                htmlcontent : "<div><input type="text"></div>"
            },
            methods:{
                addToDo: function(){
                 this.todos.push(this.currentTodos);
                 this.currentTodos = '';   
                },

                deleteItemFromList: function(index){
                    this.todos.splice(index,1)
                },

                updateItemList: function(index){
                    this.todos.set(index,1)
                }
            }
        })
    </script>
</html>

@bcjohn can you help out with the set method, as i am a newbie in Vue, — Prathamesh Doke
– Prathamesh Doke, Commented May 3, 2019 at 10:10
this.todos[index] = newVal. Just change the value of array is fine. — bcjohn
– bcjohn, Commented May 3, 2019 at 10:13

tony19 · Accepted Answer · 2022-07-16 00:34:55Z

1

Reactivity is not working here. Assign a new Array reference when changin todos array or you can use this.$set(...) to get the reactivity working.

methods:{
  addToDo: function(){
    this.todos.push(this.currentTodos);
    // assign a new Array reference in this.todos
    this.todos = [...this.todos];
    this.currentTodos = '';   
  },

  deleteItemFromList: function(index){
    this.todos.splice(index,1);
    this.todos = [...this.todos];
  },

  updateItemList: function(index){
    this.todos[index] = '1';
    this.todos = [...this.todos];
  }
}

<template>
...
<li v-for="(todo, index) in todos" :key="todo">
    {{todo}}
    <button v-on:click="deleteItemFromList(index)">X</button>
    <button v-on:click="updateItemList(index)">#</button>
</li>
...
</template>

And also add :key="todo" in v-for

edited Jul 16, 2022 at 0:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 3, 2019 at 10:41

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

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

6 Comments

Prathamesh Doke Over a year ago

hi sir, i have tried your code and added "<li v-for="(todo, index) in todos"> {{todo}}<button v-on:click="deleteItemFromList(index)">X</button v-on:click="updateItemList(index)"><button>Update</button> </li>" this in my html code but it is not working

Prathamesh Doke Over a year ago

i have added update button and passing the index of a select value

Sajib Khan Over a year ago

Try this.todos[index] = 1; & here the updated value = 1 (hard coded)

Sajib Khan Over a year ago

do you see any error in chrome console? anyway, addToDo() & deleteItemFromList() are working?

Prathamesh Doke Over a year ago

yes those methods are working but updateItemList() is not working

|

Collectives™ on Stack Overflow

Error while Updating the list item in Vuejs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related