Was die Art und Weise ist es mit Vuejs zu tun

Question

ich eine Seite mit drei Combos habe, 6 unterhalt Eingänge Text (wenn ein spezieller Wert in Combo ausgewählt wird, wird es zeigen, sonst wird es verstecken)

Dann hast ich wird über Textfelder verfügen, die eine berechnete Eigenschaft sind. Jedes Mal, wenn eine Eingabe geändert wird, wird dieser Feldwert erneut ausgewertet.

So zum Beispiel Meine Felder sind:

• GradeIni, GradeFin, Kategorie, AgeCategory, AgeIni, AgeFin, Geschlecht (wählt)
• iSteam (Checkbox)
• CategoryFullName

So, zum Beispiel, gibt es 5 vordefiniert AgeCategory, und die 6. ist benutzerdefiniert, wenn ausgewählt, zeigen AgeIni und AgeFin

Jedes Mal, wenn ein Wert geändert wird, wird CategoryFullName erneut ausgewertet.

My first answered question war, wie man Werte vom Server bekommt.

Ich wusste, wie man es mit Ajax macht, aber in diesem Fall war es einfacher, die Server-Variable zu verwenden, die von Laravel gesendet wurde, wenn Seiten geladen wurden.

So war die Antwort 2 Möglichkeiten:

@foreach ($grades as $grade) 
    <option ...>{{ $grade }}</option> 
@endforeach 

Oder

<grades :grades="{{ $grades }}"></grades> 

So würde Ich mag die zweite verwenden, aber es bedeutet, dass ich eine Komponente für jede Auswahl erstellen Option in meiner Seite, die ein wenig schwer scheint.

Also, ich bin ein wenig verwirrt darüber, wie ich diese Seite machen soll. Ist es besser von AJAX, ist es besser, in der Lage zu sein, Daten von Laravel zu erhalten, und o eine Komponente für jede Liste zu machen, oder gibt es einen besseren Weg, es zu tun?

Answer 1

Sie müssen nicht viele Komponenten verwenden. Eine Komponente und eine Variable, um die gewählte Note beizubehalten, sind in Ordnung.

Sie können eine Komponentenvorlage erstellen, um alle Noten anzuzeigen. Ich habe eine Vorlage mit Dummy-Daten erstellt, um Ihnen zu zeigen, wie Sie es tun können.

Vue.component('grades', { 
    props: ['grades', 'selected'], 
    template: '#grades-list' 
}) 

Der schwierige Teil ist, wie Sie einen Standardwert auswählen wird und es mit der Mutter synchronisiert halten:

<template id="grades-list"> 
    Curently selected: Title {{selected.title}} Value: {{selected.value}} 
    <select v-model="selected"> 
     <option v-for="grade in grades" :value="grade">{{grade.title}}</option> 
    </select> 
</template> 

Die Komponente sollte so registriert werden. Um dies zu tun, können Sie .sync

<!-- you can use :grades="{{ grades }}" with Blade too--> 
<grades :grades="grades" :selected.sync="selectedGrade"></grades> 

Um Standardwert können Sie die selectedGrade Variable aktualisiert, wenn das Dokument fertig ist, mit vm.$set.

new Vue({ 
    el: 'body', 
    data: { 
     'selectedGrade': '' 
    }, 
    ready() { 
     this.$set('selectedGrade', this.grades[1]) 
    } 
}) 

Ich habe ein Beispiel mit Dummy-Daten here erstellt.