Question

我在vue js中具有该组件，该组件具有绑定输入中的值的属性，并且我具有将对象推入数组的方法，并且我将ive绑定到表中，因此每次用户单击“添加”按钮，它接受输入值并将其添加到表中。当我按添加时，它可以工作，但它也绑定从输入中输入的值，我需要它仅推送值并随后清除输入，以便可以创建新的新细节。

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

这是Vue脚本：

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 = ''
    }
}

Answer 1

在javascript对象中是passed by reference。数组也是对象，因此同样适用。

在您的addPatientDetails方法中，不要将引用传递给this.patientActive对象，而应将其推入patients数组中创建该对象的副本。

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

这里是working fiddle

Answer 2

找到了。

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

将'PatientActive'设置为一个空对象为我解决了这个问题。

Vue Js从对象绑定到数组

2 个答案: