vue Js binds from object to Array

Question

I have this component in vue js with a property that binds value from input and i have a method to push the object to an array and i bind ive binded the array to a table so that everytime a user click the 'add' button it takes the input value and adds it to the table. When i press add it works but it also binds the value entered from the input, i need it to only push the value and to clear the input afterwards so that a fresh new details can be created.

<template>
<div>
    <div id="patientDetails">
    <div class="patient-add">
        <div>
            <label>Patient Name: </label>
            <input type="text" v-model="patientActive.name"/>
        </div>
        <div>
            <label>Patient Disease: </label>
            <input type="text" v-model="patientActive.disease"/>
        </div>
        <div>
            <button v-on:click="addPatientDetails()">Add +</button>
        </div>
    </div>
    <table>
        <thead>
            <th>Name</th>
            <th>Mobile</th>
        </thead>
        <tbody>
            <tr v-for="p in patients">
                <td>{{ p.name }}</td>
                <td>{{ p.disease }}</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

and This is the Vue Script:

export default {
name: 'patient',
data(){
    return {
        patientActive:{
          name: '',
          disease: ''
        },
        patients: []
    }
},
methods: {
    addPatientDetails(){
        var thispatient = this.patientActive;
        if(this.validatePatient()){
            this.patients.push(thispatient)
            console.log(this.patients)
        }
        //this.clearPatient()
    },
    validatePatient: function(){
        if(!this.patientActive.name){
            alert('Name is Invalid or Empty')
            return false
        }
        if(!this.patientActive.disease){
             alert('Disease is Invalid or Empty')
              return false
        }
        return true
    },
    clearPatient: function (){
        this.patientActive.name = ''
        this.patientActive.disease = ''
    }
}

What's wrong with your clearPatient function? It is clearing the inputs, isn't it? — Adre Astrian
– Adre Astrian, Commented Jul 9, 2018 at 11:55
@AdreAstrian it does but that was not the issue. it clears but in doing so it will also empty the values in the table row — ash1f
– ash1f, Commented Jul 9, 2018 at 12:00

Vamsi Krishna · Accepted Answer · 2018-07-09 12:03:28Z

1

In javascript objects are passed by reference. Arrays are also objects, so the same applies.

In your addPatientDetails method, instead of passing the reference to this.patientActive object, create a copy of it any push to the patients array.

addPatientDetails() {
  if (this.validatePatient()) {
    this.patients.push({ ...this.patientActive });
    console.log(this.patients);
  }
  this.clearPatient();
},

Here is the working fiddle

answered Jul 9, 2018 at 12:03

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

Comments

ash1f · Accepted Answer · 2018-07-09 11:58:50Z

0

Found it.

 addPatientDetails(){
        var thispatient = this.patientActive;
        if(this.validatePatient()){
            this.patients.push({ 
                name: this.patientActive.name, 
                dis: this.patientActive.disease
            })
            this.patientActive = {}
        }
    },

setting 'patientActive' to an empty object solved the problem for me.

answered Jul 9, 2018 at 11:58

ash1f

892 silver badges8 bronze badges

Collectives™ on Stack Overflow

vue Js binds from object to Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related