[Vuejs]-Vue v-model with css styling?

by

1👍

✅

The difficulty in passing the class of the component to its parent becomes easier to approach once you realize that the expression v-on:addedtask='acknowledgeAddedTask' is equivalent to v-on:addedtask='task => acknowledgeAddedTask(task)'

You can then build upon this to change your component declaration such that class='first' v-on:addedtask='acknowledgeAddedTask becomes class='first' v-on:addedtask='task => acknowledgeAddedTask("first", task)' and like wise for the second component.

Then you need to change to acknowledgeAddedTask method to accommodate the new parameter so that you end up with 

acknowledgeAddedTask: function(cls, task) { 
  this.$data.subTaskList.push({ 
    text: task, 
    class: "list-item " + cls 
  })
}

Finally, on the lis of #madplan change the class attribute to :class=task.class so that each list item has the right class as set while adding that item.

See updated fiddle

👤kharhys

1👍

I think what you want to do is bind each sub-task li so it has a class of .first or .second based on which parent task created it. Check out the class and style binding section in the Vue docs.

👤LShapz

Leave a comment