Post 从 Vue 组件列出

Question

我如何post通过子输入（在组件中，第二个输入）到组件外的列表？我可以看到输入 posts 到 subTaskList，但不会 post 它到列表？

澄清一下：我正在尝试制作一个食物计划器，其中占位符="Tilføj ret til madplanen" 的主要输入是当天的食物，第二个输入是占位符="Tilføj til indkøbsseddel"添加到购物清单 (#list)

（对不起丹麦占位符）

      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/

Answer 1

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

为了让您的组件按预期工作，您需要进行一些修改。

首先更正这一行

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

删除重复的 class 定义。你应该使用

<section class="prefetch panel">

然后在方法 addTask 的 list-component 声明中添加行

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

紧接着

this.newTask = "";

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

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

紧跟在行

之后

this.subTaskList.splice(index, 999);

在相同的 list-component 声明的方法 removeSubTask 中现在通过更改

捕获子组件更新 #madplan 模板中发出的事件

<list-component></list-component>

至此

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

您还需要声明两个新方法，以便 #madplan 现在包括

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)
    }
 }

见updated fiddle

Post 从 Vue 组件列出

Post to list from Vue component

vue.js

vue-component