How to create a new object in VueJS?

Question

JavaScript

Vue.component('list_appointments', {
    delimiters: ['{>', '<}'],
    template: '#list_appointments-template',
    data: function () {
        return {
            active_list_appointments_template: false,
            drug: {
                id: null,
                patient: null,
                disease_history: null,
                drug: null,
                start_day: null,
                end_day: null,
                is_delete: false,
            },
            list_appointments_drugs: [],
        }
    },
    methods: {
        addDrug: function () {
            // хочу добавить в list_appointments_drugs новый объект drug, но получается что добавляю модель
            this.list_appointments_drugs.unshift(this.drug)
        },
        editDrug: function () {

        },
        deleteDrug: function () {

        },
        openTemplate: function () {
            this.active_list_appointments_template = true
        },
        closeTemplate: function () {
            this.active_list_appointments_template = false
        },
        onCancel: function () {
            this.close()
        },
        onConfirm: function () {
            this.close()
        }
    },
    beforeCreate: function () {
        var self = this
        //Профиль пациента
        axios.get('http://' + window.location.host + '/api/patients/' + document.getElementById('id_patient').innerText + '/?format=json').then(function (response) {
            self.patient = response.data
        }).catch(function (error) {
            console.log(error);
        });
        //Текущая история болезни
        axios.get('http://' + window.location.host + '/api/disease_stories/' + document.getElementById('id_disease_history').innerText + '/?format=json').then(function (response) {
            self.disease_history = response.data
        }).catch(function (error) {
            console.log(error);
        });
    }
})

Answer 1

// хочу добавить в list_appointments_drugs новый объект drug, но получается что добавляю модель
this.list_appointments_drugs.unshift(this.drug)

You need to make a copy of the object:

this.list_appointments_drugs.unshift({ ...this.drug })

In general, since they said "model" ... Add a property to the component - an object that will contain default values. And copy it to drug when you need to start editing a new object (i.e. when creating an instance of the component and after adding it to the array):

data: () => ({
  drug: null,
  defaultDrugData: {
    ...
  },
  ...
}),
created() {
  this.resetDrug();
},
methods: {
  addDrug() {
    this.list_appointments_drugs.unshift(this.drug);
    this.resetDrug();
  },
  resetDrug() {
    this.drug = { ...this.defaultDrugData };
  },
  ...
},