Vue v-model with css styling?

Question

It is hard to explain this problem, so i think i will start by showing what i have:

        Vue.component('list-component', {
            data: function() {
                return {
                    newTask: "",
                    taskList: [],
                    newSubTask: "",
                    subTaskList: [],
                };
            },
            template:
                '<div>' +

                '<section class="prefetch">' +
                '<input  v-if="showInput" class="input typeahead" type="text" placeholder="mainInput" 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="removeTask(task)">X</button>' + '</summary>' +
                '<input class="subInput" type="text" placeholder="subInput" 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 = "";
                        this.$emit('addedtask', task);

                    }
                },

                //removeTasks
                //
                removeTask: function(task) {
                    var index = this.taskList.indexOf(task);
                    this.taskList.splice(index, 1);
                    this.$emit('removedtask', task);
                },
            },
        });


        new Vue({
            el: "#madplan",
            data: {
                newTask: "",
                taskList: [],
                newSubTask: "",
                subTaskList: [],
            },
            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)
              },
              removeSubTask: function(task) {
                  var index = this.subTaskList.indexOf(task);
                  this.subTaskList.splice(index, 1);
                  this.$emit('removedtask', task);
              },
            }
        });

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <section id="madplan" class="section-wrapper">

        <section class="check-list">

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

            <list-component
              class='second'   
              v-on:addedtask='acknowledgeAddedTask'
              v-on:removedtask='acknowledgeRemovedTask'
            ></list-component>
            
                    </section>
        <ul id="indkøbseddel">
            <h2>Indkøbsseddel</h2>
            <li v-for="task in subTaskList" v-bind:key="task.text" class="list-item">{{ task.text }}<button v-on:click="removeSubTask(task)">X</button></li>
        </ul>

    </section>

So, if you try to run through the app, and add some text to the mainInput field, with the class .first - this new details get the class .first aswell. But when you open the details and make an input into the new field (subInput), it posts this input to the li in ul id="indkøbseddel" - but now the class / styling is gone.

Can i somehow transfer this to the li? What i am trying to accomplish is different colors on the li, wether it has been added from the first input (list-component) or the second.

Hard to explain, so feel free to ask questions. It doesnt have to be done this way, i just need to be able to differentiate between the li's added depending on which input field.

Thanks in advance!

JSFiddle: https://jsfiddle.net/ucL2pv6f/

Answer 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.

Answer 2

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