1、给添加按钮绑定事件(输入框为空:不添加;输入框不为空:添加)
组件:
@click="addItemToList"
methods: {
// 向列表中新增 item项
addItemToList() {
// 若文本框内容为空
if (this.inputValue.trim().length <= 0) {
return this.$message.warning('文本框内容不能为空')
}
// 不为空则添加item
this.$store.commit('addItem')
}
}
this.inputValue.trim()----去除左右的空格
2、vuex---------执行添加方法
state: {
// 所有的任务列表
list: [],
// 文本框的内容
inputValue: 'aaa',
// 下一个id项
nextId: 5
},
mutations: {
// 添加列表项目
addItem(state) {
const obj = {
id: state.nextId,
info: state.inputValue.trim(),
done: false
}
state.list.push(obj)
state.nextId++
state.inputValue = ''
}
}