Question

var app = new Vue({
    el: '#app',

    data: {
        positions: []
    },

    created() {

        axios.get('/config').then(function(response) {
            this.$set(this.positions, "positions", response.data[0].dragedPositions);
        });

        console.log(this.positions.positions);
    }

});

我在数据库中配置了我的应用程序，我想在Vue实例中使用它们（这里是我的元素的位置）。但是当我得到“this.positions.positions”时我得到空字符串..我怎么能这样做？

Answer 1

听起来你想首先加载配置，然后再加载bootstrap应用程序。请使用propsData：

axios.get('/config').then(function(response) {
  new Vue({
    el: '#app',
    props: ['positions'],
    propsData: {
      positions: response.data[0].dragedPositions
    },
    created() {
      console.log(this.positions);
    }
  });
});

我甚至创建了一个小小的演示：）

const axios = {get () {
  return Promise.resolve({data: [{dragedPositions: [1,2]}]})
}}

axios.get("/config").then(function(response) {
  new Vue({
    el: "#app",
    props: ['positions'],
    propsData: {
      positions: response.data[0].dragedPositions
    },
    created() {
      console.log('created hook', this.positions);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<pre id="app">positions = {{ positions }}</pre>

Answer 2

你能试试这个伎俩吗？请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

var self = this;    
axios.get('/config').then(function(response) {
    self.$set(self.positions, "positions", response.data[0].dragedPositions);
});

顺便说一句，您似乎应该将positions初始化为对象而不是数组。

如何从数据库中获取Vue内的数据，如config或smth＆gt;

2 个答案: