Question

Vue渲染问题后端收到200ok信号，但前端页面未显示任何结果。

    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)
          }
      }
      },
};

我尝试了很多事情，例如强制异步更新呈现，但结果仍然相同。

Answer 1

使用this.msg.$forceUpdate()而不是this.$forceUpdate();并在方法之外编写created（）。

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

vue渲染问题Json返回正常但无法显示

1 个答案: