具有 css 样式的 Vue v-model？

Question

这个问题很难解释，所以我想我会先展示我有什么：

        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>

因此，如果您尝试运行应用程序，并在 mainInput 字段中添加一些文本，并使用 .first 类 - 这个新细节也会获得 .first 类。但是，当您打开详细信息并在新字段 (subInput) 中进行输入时，它会将此输入发布到 ul id="indkøbseddel" 中的 li 中 - 但现在类/样式已消失。

我可以以某种方式将其转移到 li 吗？ 我想要完成的是 li 上的不同颜色，无论它是从第一个输入（列表组件）还是第二个输入添加的。

很难解释，所以请随时提问。它不必这样做，我只需要能够根据哪个输入字段来区分添加的 li。

提前致谢！

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

Answer 1

一旦您意识到表达式v-on:addedtask='acknowledgeAddedTask' 等价于v-on:addedtask='task => acknowledgeAddedTask(task)'，将component 的类传递给它的parent 的难度就变得更容易了

然后，您可以在此基础上更改您的组件声明，使 class='first' v-on:addedtask='acknowledgeAddedTask 变为 class='first' v-on:addedtask='task => acknowledgeAddedTask("first", task)' 并同样适用于第二个组件。

然后您需要更改为acknowledgeAddedTask 方法以容纳新参数，以便您最终得到

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

最后，在#madplan 的lis 上，将类属性更改为:class=task.class，这样每个列表项在添加该项时都具有正确的类。

见updated fiddle

Answer 2

我认为您想要做的是绑定每个子任务 li，使其具有 .first 或 .second 类，具体取决于哪个父任务创建它。查看 Vue 文档中的 class and style binding section。