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初始化注入和反应性之前调用的。

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

中的所有Vue Component实例。

更新：

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之类的状态管理

使用beforeCreated时模板不呈现数据

1 个答案: