Vue.js: Versuch, Array.push zu verwenden, um mehrere Eingänge für ein V-Modell zu haben

Question

Ich habe einen MongoDB/Express Server mit einem Modell "Job". Dieser Job enthält ein Feld "Qualifikationen", das ein Array von Strings ist.

Ich habe jetzt eine Vue.js App, die grundlegende CRUD-Funktionen tun sollte. Also habe ich eine JobAdd.vue und darin habe ich ein Formular mit mehreren Eingaben für Titel, Gehalt, was auch immer. Jetzt habe ich in meinem Modell das so genannte "Qualifikationen" -Feld, also in meiner Form möchte ich mehrere Eingänge für das Qualifikationsfeld haben. Aber V-Modell ist nicht erlaubt wie v-model="job.qualification[]".

Dies ist meine aktuelle Anwendung: https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobAdd.vue

So habe ich versucht, die folgenden:

<div v-for="qual in qualification"> 
    <input v-model="qual.text"> 
    </div> 
    <button @click="addQualification"> 
    New Qualification 
</button> 

addQualification() { 
    this.qualification.push({ text: '' }); 
    this.job.qualifications = this.qualification; 
}, 

ich nun folgende Datenstruktur in meinem Klienten haben:

{ 
    "job": { 
    "qualifications": [ 
     { 
     "text": "You should do that" 
     }, 
     { 
     "text": "And have that" 
     }, 
     { 
     "text": "Lorem Ipsum" 
     } 
    ], 
    "maxSalary": "1200", 
    "title": "Test Title", 
    "salary": "1234" 
    }, 
} 

Erstes Problem mit meinem Ansatz: Ich brauche die Job.Qualifikation strukturiert wie folgt (http://t2w-api.herokuapp.com/jobs) und nicht als ein Objekt.

Aber was ich brauche, ist die folgende Darstellung: http://t2w-api.herokuapp.com/jobs

Dies als gerendert wird: https://www.team2work.at/#/jobs/57d29740f9c4f703000eec2d

Auch sie tut nichts, wenn ich meine Methode AddJob Form (on.submit) nennen:

addJob: function() { 
    this.job.qualifications = this.qualification; 
    this.$http.post('http://localhost:9001/jobs/', this.job).then(response => { 
     console.log(response); 
    }, response => { 
     console.log(response); 
    }); 
    } 
}, 

Irgendwelche Lösungen hier? Jemand zeigte auf "You are binding v-model directly to a v-for iteration alias", aber ich denke nicht, dass es mein Problem löst.

Dieses von meiner älteren Projekt ist (Express/Lenker), die ich jetzt Vue.js bin Umwandlung: https://gist.github.com/markusdanek/dcfadf554a4a99549d3d232c52b84e2c

genau

Answer 1

das gleiche :-) tun sollten, wenn Sie Qualifikationen ein Array sein wollen Wenn Sie eine Vorlage übergeben, ordnen Sie einfach Ihre Qualifikationen zu, um sie in dem von Ihnen gewünschten Format zurückzugeben.

Sie könnten diese Zeile auch entfernen, da es irrelevant erscheint, wenn Sie diesen Ansatz verwenden.

addQualification() { 
    this.qualification.push({ text: '' }); 
    //this.job.qualifications = this.qualification; 
},