Laravel Vue在更新字段上显示旧数据

Question

所以我已经为组件做了更新功能，并且可以正常工作，唯一的问题是我无法向用户显示旧数据（如果有的话）

这就是我现在拥有的：

如您所见，我不仅可以将表单数据发送到后端进行更新，而且已经拥有保存的数据。

代码

export default {
        data: function () {
            return {
                info: '',  //getting data from database
                profile: {  //sending new data to back-end
                    photo: '',
                    about: '',
                    website: '',
                    phone: '',
                    state: '',
                    city: '',
                    user_id: '',
                    csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                }
            }
        },
        mounted: function() {
            this.isLoggedIn = localStorage.getItem('testApp.jwt') != null;
            this.getInfo();
        },
        beforeMount(){
            if (localStorage.getItem('testApp.jwt') != null) {
                this.user = JSON.parse(localStorage.getItem('testApp.user'))
                axios.defaults.headers.common['Content-Type'] = 'application/json'
                axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('testApp.jwt');
                console.log()
            }
        },
         methods: {
            update() { // sending data to back-end
                let user_id = this.user.id;
                let photo = this.profile.photo;
                let about = this.profile.about;
                let website = this.profile.website;
                let phone = this.profile.phone;
                let state = this.profile.state;
                let city = this.profile.city;
                axios.put('/api/updateprofile/'+ user_id, {user_id, photo, about, website, phone, state, city}).then((response) => {
                    this.$router.push('/profile');
                    $(".msg").append('<div class="alert alert-success" role="alert">Your profile updated successfully.</div>').delay(1000).fadeOut(2000);
                });
                Vue.nextTick(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                })
            },
            getInfo: function() { //getting current data from database
                let user_id = this.user.id;
                axios.get('/api/show/'+ user_id).then((response) => {
                    this.info = response.data;
                    console.log(response);
                });
            },
           }
    }

Component sample field

// this shows my about column from database
{{info.about}}

// this sends new data to replace about column
<textarea name="about" id="about" cols="30" rows="10" class="form-control" v-model="profile.about" placeholder="Tentang saya..."></textarea>

问题

1. 如何将旧数据传递到我的字段（上面的示例）？

更新

Please open image in big size.

Answer 1

代码的问题在于，分配新值后，信息不再起作用。您首先需要保持这样的“信息”。

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

从api获取值后，分别更新每个值。

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);
            });
        },

Answer 2

这可以通过在您的Ajax响应中分配this.profile的值this.info来实现。
这样，您将为输入字段设置原始值。

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>

Answer 3

在您的文本区域中，您有一个模型profile.about，这是显示“旧数据”的方式，是将该数据分配给该模型

在create或mounted方法中，您必须像

this.profile.about = this.info.about

通过这种方式profile.about会将数据存储在您的数据库中，这样，如果用户对其进行更新，则旧数据将在this.info.about中保持安全，而在this.profile.about中进行编辑< / p>