我们如何使用VueJS将不同的按钮反转并删除相同的消息？

Question

在本练习中，我尝试使用相同的消息将其反转并使用两个不同的按钮将其删除。我在VueJS教程中编写了一些代码，但是我遇到了问题，控制台告诉我：

this.text不是一个函数

我尝试了很多东西，也很多东西，但我不明白为什么这种代码不起作用。 你能帮我吗？

这是我的HTML代码：

<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </li>
  </ul>
</div>

这是我的VueJS代码：

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    reverseMessage: function (index) {
      this.text = this.text.split('').reverse({ text: text }).join('');
    },

    addTodo: function () {
      var text = this.newTodo.trim();
      if (text) {
        this.todos.push({ text: text });
        this.newTodo = '';
      }
    },

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

Answer 1

首先，您可以为doc循环添加索引参数（v-for），以查找要删除的当前待办事项。

对于reverseMessage，只需将todo作为参数传递并反转其text属性：

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>