javascript - v-model 不能使用 javascript 函数

Question

我是 Vue JS 的新手，并且一直在从提供的文档中学习它。我的项目是添加网络应用程序的简单任务。在使用 v-model 指令时，我没有得到任何输出。我添加任务的javascript函数显然没有被调用。

<template>
  <div id="text">
       TASKS:
      <form onsubmit="return addTodo()">
        <input type="text" class="todo-input" placeholder="What's up" v-model="message">
        <input type="date" class="todo-input" v-model="ddate" >
        <input type="submit" value="Add">
      </form>
<div v-for="(todo, index) in todos" :key="todo.id" class="todo-item">
          <div>
              {{todo.id}}{{todo.title}}{{todo.date}}
            </div>
          </div>
     </div>
  </div>
</template>

export default {
  name: 'todo-list', 
  data () { 
    return {
      message: '',
      ddate: '',
      idForTodo: 1,
      todos: [
          
      ]
    }
  },
  methods: {
      addTodo(){
        if(this.message.trim().length == 0){
          return
        }
          this.todos.push({
              id: this.idForTodo,
              title: this.message,
              completed: false,
              editing: false,
              date: this.ddate,
          })
          this.ddate = ''
          this.message = ''
          this.idForTodo++
      },
      
  }
}

Answer 1

看起来有人在我写答案时用正确的代码编辑了这个问题。我在代码片段中尝试并测试了相同的代码，它正在工作。

const app = new Vue({
  el: '#text',
  data() {
    return {
      message: '',
      ddate: '',
      idForTodo: 1,
      todos: [
          
      ]
    }
  },
    methods: {
      addTodo(){
        console.log(this.message)
        if(this.message.trim().length == 0){
          return
        }
        this.todos.push({
          id: this.idForTodo,
          title: this.message,
          completed: false,
          editing: false,
          date: this.ddate,
        })
        this.ddate = ''
        this.message = ''
        this.idForTodo++
      }   
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<div id="text">
  TASKS:
  <form>
    <input type="text" class="todo-input" placeholder="What's up" v-model="message">
    <input type="date" class="todo-input" v-model="ddate" >
    <button v-on:click.prevent="addTodo">Add</button>
  </form>
  <div v-for="(todo, index) in todos" :key="todo.id" class="todo-item">
    <div>
      {{todo.id}} {{todo.title}} {{todo.date}}
    </div>
  </div>
</div>

Answer 2

如果您要存储一组收音机中的值。属性中的按钮，您需要识别按钮。不是用 id，而是用一个值。试试这个：

{{data.variant}}