Vue.js 从Vue组件发布到列表

如何通过子输入（组件内，第二个输入）发布到组件外的列表？我可以看到输入会发布到subTaskList，但不会发布到列表中吗

澄清一下：我正在尝试制作一个食品计划器，其中带有placeholder=“Tilføj ret til madplanen”的主要输入是当天的食品，带有placeholder=“Tilføj til indkøbsseddel”的第二个输入是添加到购物清单（#list）中

（为丹麦占位符感到抱歉）

Vue.component（'list-component'{
数据：函数（）{
返回{
新任务：“，
任务列表：[]，
新闻子任务：“”，
子任务列表：[]，
};
},
模板：
'' +
'' +
'' +
'' +
'' +
{{task.text}}X'+''+
'' +
'' +
'',
计算：{
showInput:function（）{
return！this.taskList.length
},
},
方法：{
//添加任务
//
addTask:function（）{
var task=this.newTask.trim（）；
如果（任务）{
这个是.taskList.push({
文本：任务
});
this.newTask=“”；
}
},
addSubTask:函数（）{
var task=this.newSubTask.trim（）；
如果（任务）{
这个.subTaskList.push({
文本：任务
});
this.newSubTask=“”；
}
},
//移除任务
//
removeSubTask:函数（任务）{
var index=this.taskList.indexOf（任务）；
这个.taskList.splice（索引，1）；
var index=this.subTaskList.indexOf（任务）；
此.subTaskList.splice（索引，999）；
},
},
});
新Vue({
el:“疯狂计划”，
数据：{
新任务：“，
任务列表：[]，
新闻子任务：“”，
子任务列表：[]，
},
});

*{
保证金：0；
填充：0；
}

曼达格
提尔斯达克

列表
{{task.text}

要完成Vue.js组件之间的通信，您需要利用

要使组件按预期工作，您需要进行一些修改

首先纠正这一行

<section class="prefetch" class="panel">

紧接着

this.newTask = "";

既然如此，为什么不加上这个呢

this.$emit('removedtask', task);

就在队伍后面

this.subTaskList.splice(index, 999);

在方法

removeSubTask

中，在同一

列表组件上

声明 现在，通过更改

<list-component></list-component>

---

请参见

您好，谢谢您的回复。这并不完全是我所想的结果，但我理解其中的困惑——并感谢您的支持！新的fiddle将.panel部分的输入字段中的输入添加到列表中，但是需要添加到列表中的第二个输入（具有子输入类的输入）。Nevermind似乎通过将“this.$emit（'addedtask'，task）”添加到addSubTask中自己解决了这个问题！我还有一个简单的问题。我在removeSubTask函数中添加了行“this.subTaskList.splice（index，999）；”，因为我希望它从列表中删除由该输入字段添加的项。这不管用，至少不是一直都管用。若要从数组中删除元素，则过滤数组以查找要删除的元素，并将其从返回的列表中排除。尝试将

removeSubTask:function（task）{var index=this.taskList.indexOf（task）；this.taskList.splice（index，1）；var index=this.subTaskList.indexOf（task）；this.subTaskList.splice（index，999）；}，

更改为

removeSubTask:function（task）{this.$data.subTaskList=this.$data.subTaskList.filter（it=>it.text！=task.text）}

我有很多东西要学。再次感谢大家的支持。这对我帮助很大！我仍然是js方面的新手：）

this.subTaskList.splice(index, 999);

<list-component></list-component>

<list-component 
  v-on:addedtask='acknowledgeAddedTask'
  v-on:removedtask='acknowledgeRemovedTask'
    ></list-component>

methods: {
  acknowledgeAddedTask: function(task) {
    this.$data.subTaskList.push({ text: task })
  },
  acknowledgeRemovedTask: function(task) {
    this.$data.subTaskList = this.$data.subTaskList.filter(it => it.text != task.text)
    }
 }