vue.js - versiones - Publicar en la lista del componente Vue

vuetify

Question

¿Cómo puedo publicar a través de subInput (en componente, segunda entrada) a la lista fuera del componente? Puedo ver que los mensajes de entrada a subTaskList, pero no lo publiquen en la lista?

Para aclaraciones: estoy tratando de hacer un planificador de alimentos, donde las entradas principales con marcador de posición = "Tilføj ret til madplanen" para ser el alimento del día, y la segunda entrada con marcador de posición = "Tilføj til indkøbsseddel" para agregar a un shoppinglist (#list)

(perdón por los marcadores de posición daneses)

      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

Para lograr la comunicación entre los componentes de Vue.js, debe aprovechar los eventos personalizados.

Para que sus componentes funcionen de la manera prevista, debe realizar algunas modificaciones.

Primero corrige esta línea

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

para eliminar la definición de clase duplicada. Deberías usar

<section class="prefetch panel">

Luego, en el método addTask en list-component declaration, agrega la línea

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

justo después de

this.newTask = "";

Mientras está en eso, ¿por qué no añadir esto también?

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

justo después de la línea

this.subTaskList.splice(index, 999);

en el método removeSubTask en la misma declaración de list-component Ahora capture los eventos emitidos en la plantilla de actualización de componente hijo #madplan cambiando

<list-component></list-component>

a esto

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

También deberá declarar los dos nuevos métodos para que #madplan ahora incluya

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

Ver el violín actualizado