发新贴  快速回复

做watch监听时获取不到JSON,老师帮我看看,代码和视频一样的

  阿栗
2021-03-25 20:48

 

// var list = [
// 	{
// 		title: "吃饭打豆豆",
// 		isChecked: false //状态为false,为不选中  任务未完成
// 	},
// 	{
// 		title: "妙味课堂",
// 		isChecked: true   //状态为true,为选中    任务完成
// 	}
// ];

var store = {
	save(key,value){
		localStorage.setItem(key,JSON.stringify(value));
	},
	fetch(key){
		return JSON.parse(localStorage.getItem(key));
	}
}

var list = store.fetch("title");

var list2 = [
	{
		title: "所有任务"
	},
	{
		title: "未完成的任务"
	},
	{
		title: "完成的任务"
	}
];

new Vue({
	el: ".main",
	data: {
		list: list,
		list2: list2,
		aaa: 0,
		todo: "",
		edtorTodos: '',  //记录正在编辑的数据
		beforeTitle: '' //记录正在编辑的数据的title
	},
	watch: {     // 一个监控对象,key值就是监控的属性
		list:function(){
			store.save("title", this.list);
		}

		// list: {
		// 	handler: function () {
		// 		store.save("title", this.list);
		// 	},
		// 	deep: true
		// }
	},
	computed: {
		noCheckeLength: function () {
			return this.list.filter(function (item) {
				return !item.isChecked
			}).length
		}
	},
	methods: {
		addTodo() {  //添加任务
			this.list.push({
				title: this.todo,
				isChecked: false
			});
			this.todo = '';
		},
		deleteTodo(todo) { //删除任务
			var index = this.list.indexOf(todo);
			this.list.splice(index, 1);
		},
		edtorTodo(todo) {  //编辑任务
			console.log(todo);
			//编辑任务的时候,记录一下编辑这条任务的title,方便在取消编辑的时候重新给之前的title
			this.beforeTitle = todo.title;

			this.edtorTodos = todo;


		},
		edtorTodoed(todo) { //编辑任务成功
			this.edtorTodos = '';
		},
		cancelTodo(todo) {  //取消编辑任务

			todo.title = this.beforeTitle;

			this.beforeTitle = '';

			//让div显示出来,input隐藏
			this.edtorTodos = '';
		},
		getstyle(i) {
			this.aaa = i;
		}
	},
	directives: {  //自定义指令
		"foucs": {
			update(el, binding) {
				if (binding.value) {
					el.focus();
				}
			}
		}
	}
});

 

本帖内容针对以下视频发布:

5-watch深度监控数据
登录 后才可以发表回复