[Vuejs]-Laravel vue show old data on update fields

by

0👍

✅

This can be done by assigning this.profile the value of this.info on your Ajax response.
This way you will have input fields set up with original values.

function callMe() {
  var vm = new Vue({
    el: '#root',
    data: {
     profile:{},
     info:{}
    },
    
    methods: {
    getInfo: function() { //getting current data from database
    this.info={about:"old data"}//your response here
    this.profile=Object.assign({},this.info);
          
        },
    },
   
    
  })
}
callMe();
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  <button @click="getInfo">Ajax Call click me</button>
  Input <input v-model="profile.about"/>
  
  <p>profile:{{this.profile}}</p>
  <p>info: {{this.info}}</p>
</div>

0👍

The problem with the code is that after assigning new value info is not reactive anymore. You need to keep “info” like this in the start.

info: {  // data from api
                photo: '',
                about: '',
                website: '',
                phone: '',
                state: '',
                city: '',
                user_id: '',
       }

And after fetching values from api update each value separately.

getInfo: function() { //getting current data from database
            let user_id = this.user.id;
            axios.get('/api/show/'+ user_id).then((response) => {
                this.info.photo = response.data.photo;
                this.info.about = response.data.about;
                //all other values
                console.log(response);
            });
        },

0👍

In your textarea you have a model profile.about, the way to show the “old data”, is to assing to that model the data

in the create or mounted method you have to assing like

this.profile.about = this.info.about

this way profile.about will have the data stored in your db, that way if the user update it, the old data will be keep safe in this.info.about and the edited in this.profile.about

Leave a comment