首页新闻找找看学习计划

大佬们,Vue.js组件,没办法获取到添加新的li里面input的值,然后页面的效果就出不来,麻烦大佬们帮我看看,初学者,很捉急,捉急了半天也不知道哪里出问题了

0
悬赏园豆:10 [已解决问题] 解决于 2019-08-14 16:12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/popper.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<title>组件间通信</title>
</head>
<body>
<div class="container">
<div id="app" class="mt-4">
<cmp-todo></cmp-todo>
</div>
</div>

<template id="tplTodo">
<div>
<h5 class="d-flex justify-content-center">
<cmp-todo-add @dala="add"></cmp-todo-add>
<cmp-todo-list :tasks="tasks"></cmp-todo-list>
</h5>
</div>
</template>

<template id="tplTodoAdd">
<div>
<form class="form-inline">
<input v-model="task" type="text" class="form-control">
<button class="btn btn-outline-danger" @click="add()">添加</button>
</form>
</div>
</template>
<template id="tplTodoList">
<div>
<ul class="list-unstyled ml-5 mt-5">
<li v-for="(task,i) in tasks" class="mt-1">
<cmp-todo-item :i="i" :task="task" @dala="remove">

            </cmp-todo-item>
        </li>
    </ul>
</div>

</template>
<template id="tplTodoItem">
<div>
<span>{{i+1}}</span><span>{{task}}</span><button @click="del(i)" class="btn btn-outline-warning">x</button>
</div>
</template>
</body>
<script>
var cmpTodoItem={
template:"#tplTodoItem",
props:["i","task"],
methods:{
del(i){//事件上行,告知父组件#tplTodoList当前要删除的元素
if(confirm("是否继续删除?"))
this.$emit("dala",i);//告知删除
}
}
};
var cmpTodoList={
template:"#tplTodoList",
props:["tasks"],//向父元素#tplTodo要tasks,属性下行
methods: {
remove(i){
this.tasks.splice(i,1);//从当前元素删除一个
}
},
components: {
cmpTodoItem
}
};
var cmpTodoAdd={
template:"#tplTodoAdd",
data:function(){
return{
task:""//接住v-model绑定的值
}
},
methods:{
add(){
this.$emit("dala",this.task);
}
}
};
Vue.component("cmp-todo",{
template:"#tplTodo",
data:function(){
return{
tasks:["吃饭","睡觉","debug"]
}
},
methods: {
add(task) {
<span><span>alert</span></span>(task);
<span><span>alert</span></span>(this.tasks);//我这里获取不到数组
this.tasks[this.tasks.length]=task;//这里改为 this.tasks.push(task);也不行
<span><span>alert</span></span>("哪里有问题")
}
},
components:{
cmpTodoAdd,
cmpTodoList
}

});

new Vue({
    el:".container>#app"
})

</script>
<script src="js/jquery-1.11.3.js"></script>
</html>

wys1234的主页 wys1234 | 初学一级 | 园豆:175
提问于:2019-08-14 14:22
< >
分享
最佳答案
0

我把你的代码在编辑器格式化了一下,如图,你怎么能在add方法体内写html标签呢?语法都报错了...

把那三行span标签删了,改成这样的试试:
add(task) {
console.log(this.tasks);
this.tasks[this.tasks.length] = task;
}
我加了一行console.log输出,如果你还是没有获取到值就在浏览器控制台看下输出信息。

收获园豆:10
默卿 | 老鸟四级 |园豆:4071 | 2019-08-14 14:41

哈哈哈,我编译器里面是用的alert,复制到这里就加上span标签了,很奇怪,然后我把我的alert删掉了之后,用console.log(this.tasks),控制台里面没有数据输出

wys1234 | 园豆:175 (初学一级) | 2019-08-14 14:47

@wys1234: 没有数据输出就说明this.tasks没有值。

默卿 | 园豆:4071 (老鸟四级) | 2019-08-14 14:53

@默卿:
可是我前面用v-model绑定了的,然后task输出是有值的,说明v-model能够把输入的值拿到,然后我就不清楚哪里出问题了,我觉得它至少应该输出那几个写死的数据的吧,我发现它出来的效果是那个新添加的元素在页面上闪一下就没了,大佬。我知道我哪里出问题了,我用了form标签控制元素,它造成了元素闪一下就没了,谢谢你,那个园豆怎么给你^^

wys1234 | 园豆:175 (初学一级) | 2019-08-14 14:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册