Problems with vue rendering Json returns well but does not display

Question

Vue Rendering Problem The back end receives a 200ok signal, but the front end page does not show any results.

    methods:{
      async created() {
          try {
              let response = await axios.get('http://localhost:5000/process')
              this.msg = response.data
              this.msg.$forceUpdate()
          } catch (err) {
              // eslint-disable-next-line
              console.log(err)
          }
      }
      },
};

I've tried many things, such as forced asynchronous update rendering, but the results are still the same.

can you change this.message.push(response.data) and then in your template you use v-for to target each obj — Renato Manalili
– Renato Manalili, Commented Nov 13, 2019 at 6:28

Sarjerao Ghadage · Accepted Answer · 2019-11-13 06:53:13Z

1

Instead of this.msg.$forceUpdate() use this.$forceUpdate(); and write created() outof methods.

 <template>
        <div class="result" >
        <div  v-bind:style="{ color: `${msg.font_color}`}">
        <p>{{msg.info_text}}</p>
        </div>
        <p> {{msg.rate_adult}}</p>
        <img :src="require(`../../static/dst/${msg.file_name}`)">
        <p>{{msg.part_name}} : {{msg.rate_part}}</p>
        </div>
    </template>
    <script>
    import axios from 'axios';

    export default {
      data() {
          return{
              msg: ""
          }
      },
        methods:{

          },
      async created() {
              try {
                  let response = await axios.get('http://localhost:5000/process')
                 if(response){
                 this.msg = response.data
                  this.$forceUpdate();
               }
              } catch (err) {
                  // eslint-disable-next-line
                  console.log(err)
              }
          }
    };
    </script>
    <style scoped>
    </style>

edited Nov 13, 2019 at 6:53

answered Nov 13, 2019 at 6:29

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

unyeol Over a year ago

Thanks for the advice. However, it is not rendered yet.

Sarjerao Ghadage Over a year ago

console your msg after assigning response.data

unyeol Over a year ago

I'm sorry, but can you explain it in more detail? I'm still confused because I'm a vue beginner.

Sarjerao Ghadage Over a year ago

after this this.msg = response.data statement write console.log(this.msg); and post console message here

Sarjerao Ghadage Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Problems with vue rendering Json returns well but does not display

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related