Question

我是vue的新手，我用vue-cli创建了该项目，但是它没有按预期工作，请您告诉我我的代码有什么问题吗？这是我的代码： App.vue

<template>
    <div id="app">
    <p>Add a todo</p>
    <input type="text" name="addtodo" placeholder="Add ur todo" v-model="itemname">
    <input type="button" value="Add" @clicked="additem">
    <ul>
        <li v-for="item in todoList" :key="item.id">
            <span>name:{{item.name}}</span>
            <span>date:{{item.date}}</span>
            <input type="button" value="delete" @click="delitem(item.id)">
        </li>
    </ul>
    </div>
</template>
<style>

</style>

<script>

export default {
    name: 'app',
    data:function(){
        return {
        itemid:1,
        itemname:"",
        todoList:[]
    }
  },
  methods:{

    //add todo item
additem:function(){
  this.todoList.push({
        id:this.itemid,
        name:this.itemname,
        date:new Date()
      })
      this.itemname=""
      this.itemid+=1
    },

    //delete item whose id is "itemid"
    delitem:function(itemid){
      console.log(itemid)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

问题是单击添加按钮后什么也没发生 enter image description here

我没有在该项目中进行任何其他修改，我们将不胜感激！

Answer 1

我在此行中不知道“ @clicked”

也许您应该使用“ @click”

Answer 2

主要问题是因为您应该使用name: '#app'而不是name: 'app'。

new Vue({
  el: '#app',
  data: function() {
      return {
        itemid: 1,
        itemname: "",
        todoList: []
      }
    },
  methods: {

      //add todo item
      additem: function() {
        this.todoList.push({
          id: this.itemid,
          name: this.itemname,
          date: new Date()
        })
        this.itemname = ""
        this.itemid += 1
      },

      //delete item whose id is "itemid"
      delitem: function(itemID) {
        this.todoList = this.todoList.map(item => item.id !== itemID).filter(Boolean)
      }
    }
});

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

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

<div id="app">
  <p>Add a todo</p>
  <input type="text" name="addtodo" placeholder="Add ur todo" v-model="itemname">
  <input type="button" value="Add" @click="additem">
  <ul>
    <li v-for="item in todoList" :key="item.id" v-if="item">
      <span>name:{{item.name}}</span>
      <span>date:{{item.date}}</span>
      <input type="button" value="delete" @click="delitem(item.id)">
    </li>
  </ul>
</div>

用vue编写的待办事项无法按预期工作

2 个答案: