Vue v-model avec style css?

Question

Il est difficile d'expliquer ce problème, donc je pense que je vais commencer par montrer ce que j'ai:

 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>

Donc, si vous essayez d'exécuter via l'application, et ajouter du texte au champ mainInput, avec la classe .first - ces nouveaux détails obtiennent la classe .first aussi. Mais lorsque vous ouvrez les détails et effectuez une entrée dans le nouveau champ (subInput), il publie cette entrée dans le fichier li in ul id = "indkøbseddel" - mais maintenant la classe/style est parti.

Puis-je en quelque sorte transférer cela à la li? Ce que j'essaye d'accomplir est des couleurs différentes sur le li, qu'il ait été ajouté à partir de la première entrée (composant de liste) ou de la seconde. Difficile à expliquer, alors n'hésitez pas à poser des questions. Il ne doit pas être fait de cette façon, j'ai juste besoin d'être en mesure de différencier le li ajouté en fonction du champ de saisie.

Merci d'avance!

jsFiddle: https://jsfiddle.net/ucL2pv6f/

Answer 1

La difficulté à faire passer la classe du component à son parent devient plus facile d'aborder une fois que vous réalisez que l'expression v-on:addedtask='acknowledgeAddedTask' équivaut à v-on:addedtask='task => acknowledgeAddedTask(task)'

Vous pouvez ensuite appuyer sur cette option pour modifier votre déclaration composant tel que class='first' v-on:addedtask='acknowledgeAddedTask devient class='first' v-on:addedtask='task => acknowledgeAddedTask("first", task)' et similaire pour le second composant.

Ensuite, vous devez changer acknowledgeAddedTask méthode pour accueillir le nouveau paramètre de sorte que vous vous retrouvez avec

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

Enfin, sur les li s de #madplan modifier l'attribut de classe :class=task.class de sorte que chaque élément de la liste a la bonne classe comme définie lors de l'ajout de cet élément.

Voir updated fiddle

Answer 2

Je pense que ce que vous voulez faire est de lier chaque sous-tâche li donc il a une classe de .first ou à base .SECOND sur laquelle tâche mère l'a créé. Découvrez le class and style binding section dans les docs Vue.