vue单组件页面无法把axios获取的值传输过去

Question

我直接上代码吧，是能获取到后台的值的，但是每次都先执行

data() {
  return {
    message: message
  }
},
我从后台获取的值根本就放不进去啊，网上的例子都是传的固定的值

template>
  <div id="indexTop">

        <div>{{message}}</div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'  var message = {}

  export default {
    name: "indexTop",
    created: function () {      this.$nextTick(function () {
        axios.get('http://localhost:66/studio/banner')
          .then(function (res) {
            console.log(res.data);
            message = res.data.length
          })
          .catch(function (err) {
            console.log(err);
          })
      });
    },
    data() {      return {
        message: message
      }
    },
  }</script>

Answer 1

在main.js中的use，添加组件等等都放在new Vue的上面，mounted中可以不用this.$nextTick，延迟体验有些差；

Answer 2

<template> &nbsp;&nbsp;<div&nbsp;id="indexTop"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>{{message}}</div> &nbsp;&nbsp;</div> </template> <script> &nbsp;&nbsp;import&nbsp;Vue&nbsp;from&nbsp;'vue' &nbsp;&nbsp;import&nbsp;axios&nbsp;from&nbsp;'axios'&nbsp;&nbsp;var&nbsp;message&nbsp;=&nbsp;{} &nbsp;&nbsp;export&nbsp;default&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"indexTop", &nbsp;&nbsp;&nbsp;&nbsp;data()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;message &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;mounted()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$nextTick(function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;self&nbsp;=&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axios.get('http://localhost:66/studio/banner') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(function&nbsp;(res)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(res.data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.message&nbsp;=&nbsp;res.data.length &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.catch(function&nbsp;(err)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(err); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}</script>我自己解决了，new vue和export default写法不一样啊，想死