首頁猿問 vue單組件頁面無法把a(bǔ)xios獲...

vue單組件頁面無法把a(bǔ)xios獲取的值傳輸過去

JavaScript Vue.js

蠱毒傳說 2018-10-22 09:09:01

我直接上代碼吧，是能獲取到后臺(tái)的值的，但是每次都先執(zhí)行data() { return { message: message } }, 我從后臺(tái)獲取的值根本就放不進(jìn)去啊，網(wǎng)上的例子都是傳的固定的值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>

查看完整描述

2 回答

心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

在main.js中的use，添加組件等等都放在new Vue的上面，mounted中可以不用this.$nextTick，延遲體驗(yàn)有些差；

反對(duì) 回復(fù) 2018-10-31

慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

<template>
  <div id="indexTop">

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

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

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

我自己解決了，new vue和export default寫法不一樣啊，想死

反對(duì) 回復(fù) 2018-10-31