[Vuejs]-Post to list from Vue component

by

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

Leave a comment