问答详情
源自:4-2 使用vue-cli开发TodoList

我的数据双向绑定报错,不知道为什么,第一次输入数据时可以正常提交,列表里也会有数据,后面再输入提交就是空白

<template>

<div>

  <div>

    <input v-modal="inputValue">

    <button @click="handleSubmit">提交</button>

  </div>

  <ul>

  <todo-item v-for="(item, index) of list" :content="item"></todo-item>

  </ul>

 

 </div>

</template>


<script>

import TodoItem from './components/TodoItem'

  


export default {

components:{

'todo-item': TodoItem,

},

data () {

  return {

  inputValue: '123',

  list: []

  }

  },

  methods:{

  handleSubmit (){

  this.list.push(this.inputValue);

  console.log(this.list)

  this.inputValue = '';

  }

  }

}

</script>

https://img2.mukewang.com/5bac828e0001a37d07460460.jpg

https://img.mukewang.com/5bac82910001968711780840.jpg

下面是todoitem模块的代码

<template>

  <li>{{content}}</li>

</template>


<script>

export default {

  props: ['content']

}

  

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>


</style>


提问者:在路上的蚂蚁 2018-09-27 15:12

个回答

  • miniwyy
    2018-09-28 16:31:40

    https://img2.mukewang.com/5bade6e100010ce105090301.jpg

    v-model