Javascript 使用beforeCreated时未使用数据呈现模板

我不确定为什么没有从

此.resp.memo

呈现数据。我认为它应该加载，因为它保存了数据，然后用所有的数据渲染纹理

<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>

{{this.$route.params.id}
取消
更新
导出默认值{
名称：“编辑”，
beforeCreate（）{
这是$axios.get（'http://172.16.157:5000/api/memo/“+此.$route.params.id，{
标题：{'Accept'：'application/json'，
“内容类型”：“应用程序/json”
}})。然后（（响应）=>{
this.resp=响应；
})
},
数据（）{
返回{
对象,，
}
},
方法：{
更新备忘录：功能（）{
var obj={'id'：this.$route.params.id，'memo'：this.memo\u text}
这是$axios.put（）http://172.16.157:5000/api/memo“，obj，{
标题：{'Accept'：'application/json'，
“内容类型”：“应用程序/json”
}})
}
}
}

根据，我认为这是有意义的，因为在VueJS初始化注入和反应之前调用了

beforeCreate

我建议在安装前将“获取数据”功能移至

。在安装之前，您将被允许访问
中的所有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'
                }})
  }
}
}

或者使用状态管理，比如根据，我认为这是有意义的，因为在VueJS初始化注入和反应之前调用了beforeCreate

我建议在安装前将“获取数据”功能移至
。在安装之前，您将被允许访问
中的所有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'
                }})
  }
}
}

或者改为使用状态管理
您是否已验证API是否正确响应？没有收到错误？是的，我正在取回我的数据，而不是使用beforeCreate，您是否尝试过mounted（）和created（）？是的，我尝试了这两种方法，并且更多如果您只是使用
{resp.memo}将值转储为文本，它是否显示了正确的值
而不是使用
b-form-textarea
？您是否已验证从API获得了正确的响应？并且没有得到错误？是的，我正在取回我的数据，而不是使用beforeCreate，您是否尝试过mounted（）和created（）？是的，我尝试了这两种方法，并且更多如果您只是使用
{{resp.memo}
而不是使用
b-form-textarea
将值转储为文本，它是否显示了正确的值？