从 Vue 组件发布到列表 [英] Post to list from Vue component
问题描述
如何通过 subInput(in component, 2nd input) 发布到组件外的列表?我可以看到输入发布到 subTaskList，但不会发布到列表?
澄清:我正在尝试制作一个食物计划器，其中主要输入占位符="Tilføj ret til madplanen" 是当天的食物，第二个输入是占位符="Tilføj til indkøbsseddel"添加到购物清单 (#list)
(抱歉丹麦占位符)
Vue.component('list-component', {数据:函数(){返回 {新任务: ""，任务列表: []，新子任务:"",子任务列表:[]，};},模板:''+''+'<input v-if="showInput" class="input typeahead" type="text" placeholder="Tilføj ret til madplanen" v-model="newTask" v-on:keyup.enter="addTask">'+'</节>'+'<details v-for="task in taskList" v-bind:key="task.text" class="sub-list-item">'+'<summary>{{ task.text }}<button v-on:click="removeSubTask(task)">X</button>'+ '</摘要>'+'<input class="subInput" type="text" placeholder="Tilføj til indkøbsseddel" v-model="newSubTask" v-on:keyup.enter="addSubTask">'+'</详细信息>'+'</div>',计算:{显示输入:函数(){返回 !this.taskList.length},},方法: {//添加任务//添加任务:函数(){var task = this.newTask.trim();如果(任务){this.taskList.push({文字:任务});this.newTask = "";}},添加子任务:函数(){var task = this.newSubTask.trim();如果(任务){this.subTaskList.push({文字:任务});this.newSubTask = "";}},//删除任务//removeSubTask:函数(任务){var index = this.taskList.indexOf(task);this.taskList.splice(index, 1);var index = this.subTaskList.indexOf(task);this.subTaskList.splice(index, 999);},},});新的 Vue({el: "#madplan",数据: {新任务: ""，任务列表: []，新子任务:"",子任务列表:[]，},});* {边距:0；填充:0；}
<script src="https://unpkg.com/vue/dist/vue.js"></script><section id="madplan" class="section-wrapper"><section class="check-list"><h1>曼达格</h1><列表组件></列表组件><h1>Tirsdag</h1><列表组件></列表组件></节><ul id="列表"><h2>列表</h2><li v-for="subTaskList 中的任务" v-bind:key="task.text" class="list-item">{{ task.text }}</li></section>
小提琴:https://jsfiddle.net/txh85nq0/1/
要完成 Vue.js 组件之间的通信，您需要利用 自定义事件
为了让您的组件按预期工作，您需要进行一些修改.
首先更正这一行
删除重复的类定义.你应该使用
然后在list-component声明的方法addTask中添加一行
this.$emit(' addedtask', task);紧接着
this.newTask = "";既然如此，为什么不也加上这个
this.$emit('removedtask', task);就在该行之后
this.subTaskList.splice(index, 999);在方法 removeSubTask 中的同一个 list-component 声明现在通过更改
#madplan模板中发出的事件到这里
您还需要声明这两个新方法，以便 #madplan 现在包含
方法:{确认添加任务:功能(任务){this.$data.subTaskList.push({ text: task })},确认移除任务:功能(任务){this.$data.subTaskList = this.$data.subTaskList.filter(it => it.text != task.text)}}参见更新的小提琴
How can i post through subInput(in component, 2nd input) to the list outside the component? I can see that the input posts to subTaskList, but wont post it to the list?
For clarifications: I'm trying to make a food planner, where the main inputs with placeholder="Tilføj ret til madplanen" to be the food for the day, and the second input with placeholder="Tilføj til indkøbsseddel" to add to a shoppinglist (#list)
(sorry for the danish placeholders)
Vue.component('list-component', {
data: function() {
return {
newTask: "",
taskList: [],
newSubTask: "",
subTaskList: [],
};
},
template:
'<div>' +
'<section class="prefetch" class="panel">' +
'<input v-if="showInput" class="input typeahead" type="text" placeholder="Tilføj ret til madplanen" v-model="newTask" v-on:keyup.enter="addTask">' +
'</section>' +
'<details v-for="task in taskList" v-bind:key="task.text" class="sub-list-item">' +
'<summary>{{ task.text }}<button v-on:click="removeSubTask(task)">X</button>' + '</summary>' +
'<input class="subInput" type="text" placeholder="Tilføj til indkøbsseddel" v-model="newSubTask" v-on:keyup.enter="addSubTask">' +
'</details>' +
'</div>',
computed: {
showInput: function() {
return !this.taskList.length
},
},
methods: {
//addTasks
//
addTask: function() {
var task = this.newTask.trim();
if (task) {
this.taskList.push({
text: task
});
this.newTask = "";
}
},
addSubTask: function() {
var task = this.newSubTask.trim();
if (task) {
this.subTaskList.push({
text: task
});
this.newSubTask = "";
}
},
//removeTasks
//
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);
},
},
});
new Vue({
el: "#madplan",
data: {
newTask: "",
taskList: [],
newSubTask: "",
subTaskList: [],
},
});
* {
margin: 0;
padding: 0;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<section id="madplan" class="section-wrapper">
<section class="check-list">
<h1>Mandag</h1>
<list-component></list-component>
<h1>Tirsdag</h1>
<list-component></list-component>
</section>
<ul id="list">
<h2>list</h2>
<li v-for="task in subTaskList" v-bind:key="task.text" class="list-item">{{ task.text }}</li>
</ul>
</section>
Fiddle: https://jsfiddle.net/txh85nq0/1/
To accomplish communication between Vue.js components, you need to leverage the Custom events
For your components to work as intended you need to make a few modifications.
First correct this line
<section class="prefetch" class="panel">
to remove duplicate class definition. You should use
<section class="prefetch panel">
Then in the method addTask in list-component declaration add the line
this.$emit('addedtask', task);
right after
this.newTask = "";
While at it, why not also add this
this.$emit('removedtask', task);
right after the line
this.subTaskList.splice(index, 999);
in the method removeSubTask on the same list-component declaration
Now catch the events emitted in the child component update #madplan template by changing
<list-component></list-component>
to this
<list-component
v-on:addedtask='acknowledgeAddedTask'
v-on:removedtask='acknowledgeRemovedTask'
></list-component>
You will also need to declare the two new methods so that #madplan now includes
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)
}
}
See updated fiddle
这篇关于从 Vue 组件发布到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
