javascript - 使用 beforeCreated 时模板不渲染数据

Question

我不确定为什么数据没有从 this.resp.memo 渲染。我认为它应该加载，因为它保存数据，然后渲染 veiw 和所有数据

<template>
  <div class="container" >
      <div class="card mt-3">
          <div class="card-header">
            <h5>{{ this.$route.params.id }}</h5>
          </div>
          <div class="card-body">
              <div class="row">

                <b-form-textarea height="100%"
                  id="textarea"
                  auto-grow
                  resize="false"
                  rows="3"
                  class="h-100"
                  v-model="memo_text"
                  :value="`${this.resp.memo}`"  
                  max-rows="">
                </b-form-textarea>
                </div>
            </div>
            <div class="card-footer">
              <div class="row">
                <div class="col-md-6">
                  <button class="float-right btn btn-danger">Cancel</button>
                </div>
                <div class="col-md-6">
                  <button class="float-left btn btn-primary" v-on:click="update_memo">Update</button>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Edit',
  beforeCreate() {
        this.$axios.get('http://172.16.157:5000/api/memo/'+ this.$route.params.id, {  
            headers: {'Accept': 'application/json',
                    'Content-Type': 'application/json'
        }}).then((response) => {
            this.resp = response;
            })
    },
  data() {
    return {
      resp: Object,
    }
  },
    methods: {
        update_memo: function () {
                var obj =  {'id': this.$route.params.id, 'memo': this.memo_text}
                this.$axios.put('http://172.16.157:5000/api/memo', obj, {  
                    headers: {'Accept': 'application/json',
                            'Content-Type': 'application/json'
                }})
  }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 1

根据Vue.js LifeCycle here ，我认为这是有道理的，因为 beforeCreate 在 VueJS 初始化注入(inject)和 react 性之前被调用。

我建议将您的获取数据函数移至beforeMount。您将被允许访问 beforeMount

内的所有 Vue 组件实例

更新:

export default {
  name: 'Edit',
  data() {
    return {
      resp: Object,
    }
  },
  beforeMount() {
        this.$axios.get('http://172.16.157:5000/api/memo/'+ this.$route.params.id, {  
            headers: {'Accept': 'application/json',
                    'Content-Type': 'application/json'
        }}).then((response) => {
            this.resp = response;
            })
    },
    methods: {
        update_memo: function () {
                var obj =  {'id': this.$route.params.id, 'memo': this.memo_text}
                this.$axios.put('http://172.16.157:5000/api/memo', obj, {  
                    headers: {'Accept': 'application/json',
                            'Content-Type': 'application/json'
                }})
  }
}
}

或者使用状态管理，例如 Vuex相反