Vue semantic ui style auswählen Problem

Ich habe ein Problem mit dem Stylen einer Auswahl innerhalb einer V-for-Schleife. Nicht wirklich sicher, was das verursacht, es scheint, dass das Javascript, das für das Dropdown spezifisch ist, nicht ausgeführt wird.Vue semantic ui style auswählen Problem

grundsätzlich Schüler haben Evaluationen und Lehrer können diese und sind in der Lage zu geben, eine Markierung auf einem eval

aus irgendeinem Grund die Klasse wählt richtig

Evalution.vue gestylt sind nicht sehen:

` ``

<template> 
    <div> 
     <div v-for="(evaluation, index) in evaluations"> 
      <div v-if="index == 0" class="ui divider"></div> 
      <h3>{{ evaluation.subject.name }}</h3> 
      <p>Passed on: {{ moment(evaluation.passed_at).format("DD-MM-YYYY") }}</p> 

      <div v-show="evaluation.pivot.result !== null"> 
       Note: {{ evaluation.pivot.result + "/20" }} 
       &nbsp;&nbsp; 
       <button class="ui blue button">Modify</button> 
      </div> 
      <div v-show="evaluation.pivot.result == null"> 
       <div class="ui sub header"></div> 
       <select :id="'grade'+index" class="ui dropdown compact"> 
        <option selected="selected" value="">Grade</option> 
        <template v-for="grade in grades"> 
         <option :value="grade.id"> 
          {{ grade.text }} 
         </option> 
        </template> 

       </select> 
       <button class="ui tiny red button">Rate</button> 
      </div> 

      <p>Corrected by: {{ evaluation.teacher.firstname }} {{ evaluation.teacher.lastname }}</p> 
      <div v-if="index !== evaluations.length-1" class="ui divider"></div> 
     </div> 
    </div> 
</template> 

... 

props: ['evaluations'], 
data() { 
      return { 
       selectedGrade: '', 
       grades: [ 
        {text: "0", id: 0}, 
        {text: "1", id: 1}, 
        {text: "2", id: 2}, 
        {text: "3", id: 3}, 
        {text: "4", id: 4}, 
        {text: "5", id: 5}, 
        {text: "6", id: 6}, 
        {text: "7", id: 7}, 
        {text: "8", id: 8}, 
        {text: "9", id: 9}, 
        {text: "10", id: 10}, 
        {text: "11", id: 11}, 
        {text: "12", id: 12}, 
        {text: "13", id: 13}, 
        {text: "14", id: 14}, 
        {text: "15", id: 15}, 
        {text: "16", id: 16}, 
        {text: "17", id: 17}, 
        {text: "18", id: 18}, 
        {text: "19", id: 19}, 
        {text: "20", id: 20}, 

       ] 
      }

`` `

Quelle

2017-12-01 user3813360

Können Sie eine Geige für diese erstellen? –

Ich würde vermeiden, 'dropdowns' in Semantik zu verwenden, wenn' Vue' verwendet wird, sie sind schwer zu handhaben, weil viel von dem, was sie tun, jQuery benötigt, um das DOM zu aktualisieren und die Ereignisse korrekt zu synchronisieren ist ein Albtraum. Stattdessen würde ich für eine Vue-spezifische Auswahl wie [vue-select] (https://github.com/sagalbot/vue-select) gehen. –

es ist das Dropdown, das innerhalb der v-for erzeugt wird, erhalten sie nicht das Javascript, das sie formatiert, Nachdem die Seite geladen wird, kann ich $ ('# elem'). Dropdown() anwenden und es formt es richtig – user3813360

Der Nachteil eines UI-Frameworks besteht darin, dass die Stile manchmal auf ihre eigene Komponente beschränkt sind, sodass Sie sie nicht überschreiben können. Ich sehe nicht, was Sie hier fragen (Javascript-Problem), aber Sie erwähnen immer wieder über die Stile.

In solchen Fällen, ich erstellen einen Wrapper div und schreiben Stile um es. Wenn es nicht möglich scheint, tauche ich in die Stile des Frameworks ein und fixiere es dann.

Eine andere Möglichkeit ist die Verwendung von !important in Ihrer Komponente für das Stilattribut, das Sie im Framework beheben müssen.

Quelle

2017-12-02 11:35:57

gelöst durch Zugabe:

Vue.directive('dropdown', { 
    inserted(el) { 
     $(el).dropdown() 
    } 
})

und die Richtlinie über meine select hinzufügen:

<select v-dropdown>

Quelle

2017-12-02 17:50:05 user3813360

Vue semantic ui style auswählen Problem

Antwort

Verwandte Themen