[Vuejs]-How we can reverse and remove the same message with to different buttons with VueJS?

by

0👍

First you can add the index argument (doc) for the v-for loop to find the current todo to remove.

For reverseMessage, just pass the todo as argument and reverse its text property:

new Vue({
  el: "#app",
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo() {
      let text = this.newTodo.trim();
      if (text) {
        let todo = { text: text }
        this.todos.push(this.reverseMessage(todo))
        this.newTodo = ''
      }
    },
    reverseMessage(todo) {
      todo.text = todo.text.split('').reverse().join('')
      return todo
    },
    removeTodo(i) {
      this.todos.splice(i, 1);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, i) in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo(i)">X</button>
      <button v-on:click="reverseMessage(todo)">Reverse Message</button>
    </li>
  </ul> 
</div>

Leave a comment