template not rendering with data when using beforeCreated

Question

I am not sure why data is not rendering from this.resp.memo. I think it should load because it saves the data and then render the veiw and with all the data

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

Have you verified that you're getting a proper response from the API? And not getting an error? — Matt U
– Matt U, Commented Jan 10, 2020 at 2:34
instead of using beforeCreate, have you tried mounted() and created()? — Jenuel Ganawed
– Jenuel Ganawed, Commented Jan 10, 2020 at 3:31
Does it show the correct value if you just dump out the value as text using {{ resp.memo }} rather than using a b-form-textarea? — skirtle
– skirtle, Commented Jan 10, 2020 at 8:06

tony19 · Accepted Answer · 2022-07-15 22:52:13Z

According to Vue.js LifeCycle here, I think it makes sense since beforeCreate was called before VueJS initializes the injections and reactivity.

I would recommend moving your get data function into beforeMount. You will be allowed to access all Vue Component instances inside beforeMount

UPDATE:

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'
                }})
  }
}
}

Or use state management like Vuex instead

Collectives™ on Stack Overflow

template not rendering with data when using beforeCreated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related