CODEWITHSUNDEEP
arraysmongodbobjectvue.jsvuejs2
mrks
mrks

Reputation: 5631

Vue.js: Trying Array.push to have multiple inputs for one v-model

I have a MongoDB/Express Server with a model "job". This job contains a field "qualifications", which is an Array of Strings.

I now have a Vue.js app which should do basic CRUD functions. So I have a JobAdd.vue and in there I have a form with multiple inputs for title, salary, whatsoever. Now I have in my model the so called "qualifications" field, so in my form I want to have multiple inputs for the qualification field. But v-model is not allowed like v-model="job.qualification[]".

This is my current application: https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobAdd.vue

So I tried the following:

<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;
},

I now have the following data structure in my client:

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

First problem with my approach: I need the job.qualification structured like this (http://t2w-api.herokuapp.com/jobs) and not as a object.

But what I need is the following representation: http://t2w-api.herokuapp.com/jobs

This will be rendered as: https://www.team2work.at/#/jobs/57d29740f9c4f703000eec2d

Also it does nothing, when I call my method addJob form (on.submit):

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);
    });
  }
},

Any solutions here? Someone pointed to "You are binding v-model directly to a v-for iteration alias" but I do not think that it resolves my problem.

This is from my older project (Express/Handlebars) that I am now converting to Vue.js: https://gist.github.com/markusdanek/dcfadf554a4a99549d3d232c52b84e2c

Should do exactly the same :-)

Upvotes: 1

Views: 1322

Answers (1)

Bert
Bert

Reputation: 82489

If you want qualifications to be an array of strings when you submit it, just map over your qualifications to return them in the format you require.

let job = Object.assign({}, this.job)
job.qualifications = this.qualification.map(q => q.text)

this.$http.post("...", job)
...

You could also remove this line as it seems irrelevant if you take this approach.

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

Upvotes: 1

Related Questions