Publier sur la liste de Vue component

Question

Comment puis-je publier via subInput (dans le composant, 2ème entrée) à la liste en dehors du composant? Je peux voir que l'entrée poste à subTaskList, mais ne l'affichera pas dans la liste?

Pour des clarifications: J'essaye de faire un planificateur de nourriture, où les entrées principales avec placeholder = "Tilføj ret til madplanen" pour être la nourriture pour le jour, et la deuxième entrée avec placeholder = "Tilføj til indkøbsseddel" ajouter à un ShoppingList (#list)

(désolé pour les espaces réservés danois)

 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

Pour accomplir la communication entre les composants Vue.js, vous devez tirer parti de la Custom events

Pour vos composants fonctionnent comme prévu, vous devez faire quelques modifications.

d'abord corriger cette ligne

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

pour supprimer la définition de classe en double. Vous devez utiliser

<section class="prefetch panel"> 

Ensuite, dans la méthode addTask dans list-component déclaration ajoutez la ligne

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

juste après

this.newTask = ""; 

Pendant son séjour à, pourquoi pas ajouter aussi cette

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

juste après la ligne

this.subTaskList.splice(index, 999); 

dans la méthode removeSubTask sur la même list-component déclaration attraper maintenant les événements émis dans la mise à jour composant enfant #madplan modèle en changeant

<list-component></list-component> 

à cette

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

Vous devrez également déclarer les deux nouvelles méthodes afin que #madplan comprend maintenant

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

Voir updated fiddle