大佬们，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>
最佳答案
0
我把你的代码在编辑器格式化了一下，如图，你怎么能在add方法体内写html标签呢？语法都报错了...
把那三行span标签删了，改成这样的试试：
add(task) {
console.log(this.tasks);
this.tasks[this.tasks.length] = task;
}
我加了一行console.log输出，如果你还是没有获取到值就在浏览器控制台看下输出信息。
收获园豆：10
哈哈哈，我编译器里面是用的alert，复制到这里就加上span标签了，很奇怪，然后我把我的alert删掉了之后，用console.log（this.tasks),控制台里面没有数据输出
@wys1234: 没有数据输出就说明this.tasks没有值。
@默卿:
可是我前面用v-model绑定了的，然后task输出是有值的，说明v-model能够把输入的值拿到，然后我就不清楚哪里出问题了，我觉得它至少应该输出那几个写死的数据的吧，我发现它出来的效果是那个新添加的元素在页面上闪一下就没了，大佬。我知道我哪里出问题了，我用了form标签控制元素，它造成了元素闪一下就没了，谢谢你，那个园豆怎么给你^^