Vue.js 设置数据后无法设置选项

Question

在通过 API 获取所需数据后，我尝试为我的 Vue 组件设置一个选项。创建Vue实例时数据设置正确，但似乎不影响我的条件。

这是sn-p：

import axios from 'axios';

Vue.component("order-now", {

    delimiters: ["${", "}"],

    props: {
        dynamic: {
            type: Boolean,
            default: false
        },
        template: null
    },

    data() {
        return {
            order: '',
            startInterval: false,
        }
    },

    /**
     * created
     */
    created() {
        this.getOrderNow();
        this.$options.template = this.template;
    },

    mounted() {

        if(this.startInterval)
            this.$options.interval = setInterval(this.getOrderNow(),     10000);

    },

    /**
     * beforeDestroy
     */
    beforeDestroy() {
        clearInterval(this.$options.interval);
    },

     methods: {

        /**
         * getOrderNow
         *
         * Receive data from api route
         * and store it to components data
         */
        getOrderNow() {

            axios.get('/rest/order-now').then(({data}) => {

                this.order = data.orderNow.order;
                this.startInterval = data.orderNow.startInterval;

            }).catch(e => {
                console.error('Could not fetch data for order string.')
            });

        }

    }

});

当created 钩子被调用时，我调用了我的getOrderNow() 方法。这工作正常，我的数据已设置。

如您所见，在mounted() 钩子中，我尝试查看setInterval 是否设置为true 或false，并在有条件的情况下设置一个选项，但setInterval 始终为false。

我认为在 created 钩子中调用我的方法后可能会改变，但事实并非如此。

Answer 1

this.startInterval 是 false，因为在应用 mounted() 时它可能永远不会设置为 true。问题是您在 axios 返回的承诺解决后设置了startInterval，这很可能发生在mounted() 之后。

要解决这个问题，您只需在 axios.then() 内设置间隔即可。

阅读评论后更新（工作演示）：

const API = {
  counter: 0,
  getItems() {
    return new Promise((fulfill) => {
      setTimeout(() => {
        fulfill(API.counter++);
      })
    });
  },
};

new Vue({
  el: "#app",
  data: {
    interval: false,
    data: '',
  },
  methods: {
    fetchThings() {
      API.getItems().then((data) => {
        this.data = data;
      });
    },
  },
  created() {
    this.fetchThings();
    this.interval = setInterval(this.fetchThings, 1000);
  },
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <pre>
    {{data}}
  </pre>
</div>

还有jsfiddle