时间戳

首页 > 解决方案 > 嵌套循环中的Vue数据（this.numberOfBars）超出范围

javascript - 嵌套循环中的Vue数据（this.numberOfBars）超出范围

问题描述

我对 vue 很陌生，无法解决这个问题。在谷歌上花了几个小时没有任何运气。一旦我添加父外观（3 中的 j）this.numberOfBars就超出了范围。不幸的是，在这个一次性的快速项目中，我根本不知道我不知道什么。谁能帮助我做错什么？

const app = new Vue({
  el: '#app',
  methods: {
    bars() {
      const bars = []
      for (let i = 0; i < this.numberOfBars; i++) {
        bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
      }
      return bars
    },
  },
  data() {
    return {
      scale: 2,
      numberOfBars: 30,
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div style="clear: left" v-for="j in 3">
    <div v-for="(y, i) in bars()" :key="i" :style="{ width: scale * j, height: (numberOfBars * j) * scale, float: 'left', borderTop: (y * scale) + 'px solid blue' }">
    </div>
    PI = {{ bars().reduce((a, b) => a+(4*b)/Math.pow(this.numberOfBars * j, 2), 0) }}

  </div>
</div>

标签： javascriptvue.jsvuejs2

解决方案

在您的模板中，您不需要this：

const app = new Vue({
  el: '#app',
  methods: {
    bars() {
      const bars = []
      for (let i = 0; i < this.numberOfBars; i++) {
        bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
      }
      return bars
    },
  },
  data() {
    return {
      scale: 2,
      numberOfBars: 30,
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div style="clear: left" v-for="j in 3">
    <div v-for="(y, i) in bars()" :key="i" :style="{ width: scale * j + 'px', height: (numberOfBars * j) * scale + 'px', float: 'left', borderTop: (y * scale) + 'px solid blue' }">
    </div>
    PI = {{ bars().reduce((a, b) => a+(4*b)/Math.pow(numberOfBars * j, 2), 0) }}
    <!-- remove this before numberOfBars -->

  </div>
</div>

推荐阅读