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

Question

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 :-)

@mrks You need an extra input and a new model for the new qualification value — aletzo
– aletzo, Commented May 11, 2017 at 18:12

Bert · Accepted Answer · 2017-05-11 18:26:44Z

1

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

edited May 11, 2017 at 18:26

answered May 11, 2017 at 18:11

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mrks Over a year ago

Getting: TypeError: Cannot read property 'map' of undefined. github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/…

Bert Over a year ago

@mrks I added the plural to it. just use this.qualification.map. I'll fix the answer.

mrks Over a year ago

Looks good! :-) t2w-api.herokuapp.com/jobs/5914ae6a19fc6d7185335ae5

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related