Vue.js: Manipulate Array and post form with new data

Question

In my Vue.js application I want to post form data to my Node.js/MongoDB Backend.

This is my source code: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobEdit.vue

JSON for my job entry: http://t2w-api.herokuapp.com/jobs/591c09a55ba85d0400e5eb61

Relevant code for my question:

HTML:

<div class="row">
    <input type='text' 
        :name="'qual'+index" 
        v-model="qualifications[index]">

    <button @click.prevent="removeQualifiaction(index)">X</button>
</div>

Methods:

onChange(value, $event){
    if (!this.job.xmlOnline)
      this.job.xmlOnline = []

    const index = this.job.xmlOnline.findIndex(v => v == value)
    const checked = $event.target.checked

    if (checked && index < 0)
      this.job.xmlOnline.push(value)
    if (!checked && index >= 0)
      this.job.xmlOnline.splice(index, 1)
}

removeQualifiaction() {
    this.qualifications.splice(this.qualifications.index, 1);
}

Sending the form data with submit button on form end:

editJob() {
    let job = Object.assign({}, this.job);
    job.qualifications = this.qualifications;
    job.responsibility = this.responsibility;
    this.$http.post('https://t2w-api.herokuapp.com/jobs/' + this.$route.params.id, job).then(response => {
      console.log(response);
    }, response => {
      console.log(response);
    });
}

My problems now:

When I edit a "Job", I have a list of "qualification items", that are input fields in my form.

Clicking the "delete" button results that the first input gets deleted, not the one I am clicking. Done with @thanksd answer.

How do I add a button and method to add a new input field and to append it to my job.qualifications?

In my JobAdd.vue implemented, to add a new entry to job.qualifications, like this:

<a @click.prevent="addQualification">+</a>

addQualification() {
    this.qualification.push({ text: '' });
}

addJob() {
    let job = Object.assign({}, this.job);
    job.qualifications = this.qualification.map(q => q.text);
    this.$http.post('https://t2w-api.herokuapp.com/jobs/', job).then(response => {....

Full source for my JobAdd.vue: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobAdd.vue

this.qualification.push({ text: '' }); doesnt work obviously not in my JobEdit.vue when there are already strings in my job.qualifications.

thanksd thanksd · Accepted Answer · 2017-05-19T14:13:37

Change your removeQualifiaction method to use the index being passed in:

removeQualifiaction(index) {
  this.qualifications.splice(index, 1);
}

Vue.js: Manipulate Array and post form with new data

1 Answers