Vue中使用箭头函数初始化data()

Question

为什么我获取不到'expired'的数组？我可以看到过期是一个函数，但我想要一个数组。

export default {
  name: 'a',
  data () {
    return {
      labelEnable: "a",
      expired: () => {
        var a = []
        for (var i = 1; i < 31; i++) { 
          a.push(i)
        }
        return a
      },
    }
  },

Answer 1

您可以通过 this.expired() 而不是 this.expired

访问它

new Vue({
  el: '#app',
  data () {
    return {
      labelEnable: "a",
      expired: () => [1, 3],
    }
  },
  mounted() {
    console.log(this.expired())
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-for="elem in expired()">{{ elem }}</p>
</div>

Answer 2

您声明了一个计算过期的函数，但您没有调用和执行它。试试这个：

  expired: (() => {
    var a = []
    for (var i = 1; i < 31; i++) { 
      a.push(i)
    }
    return a
  })(),

但是对于这个特定的例子，有一个更明确的解决方案：

expired: new Array(30).fill().map((d, i) => i + 1)

Vue中使用箭头函数初始化data()

Using arrow function to initialize data() in Vue

javascript

vue.js

anonymous-function

arrow-functions