vue.js -在v-for循环中递增全局变量

nx7onnlm  于 2023-08-07  发布在  Vue.js
关注(0)|答案(3)|浏览(183)

我有一个简单的for循环。我尝试在每个循环中增加一个变量。这听起来像是一个非常简单的初学者任务,但我已经奋斗了几个小时。

new Vue({
  el: '#app',
  data() {
    return {
      globalVariable: 0,
      posts: [
        { id: 1, title: 'Post A' },
        { id: 2, title: 'Post B' },
        { id: 3, title: 'Post C' }
      ]
    };
  },
  methods: {
    incrementGlobalVariable() {
      return this.globalVariable++;
    }
  }
});

个字符

输出:

Global Variable @ Post A: 303
Global Variable @ Post B: 304
Global Variable @ Post C: 305
Global Variable: 306


控制台出错:

You may have an infinite update loop in a component render function.

(found in <Root>)

预期输出:

Global Variable @ Post A: 1
Global Variable @ Post B: 2
Global Variable @ Post C: 3
Global Variable: 3

eimct9ow

eimct9ow1#

尝试从data函数中删除globalVariable,该函数是React式的并触发重新呈现:

let globalVariable = 0
new Vue({
  el: '#app',
  data() {
    return {
      posts: [
        { id: 1, title: 'Post A' },
        { id: 2, title: 'Post B' },
        { id: 3, title: 'Post C' }
      ]
    };
  },
  computed: {
    getGlobalVariable() {
      return globalVariable
    }
  },
  methods: {
    incrementGlobalVariable() {
      globalVariable++;
      return globalVariable
    }
  }
});

个字符

z4iuyo4d

z4iuyo4d2#

整个设计模式没有意义,因为对列表的任何更新都会再次增加全局。所以这意味着你的列表是相当静态的。
如果你的列表是静态的,使用v-once

new Vue({
  el: '#app',
  data() {
    return {
      globalVariable: 0,
      posts: [
        { id: 1, title: 'Post A' },
        { id: 2, title: 'Post B' },
        { id: 3, title: 'Post C' }
      ]
    };
  },
  methods: {
    incrementGlobalVariable() {
      return ++this.globalVariable;
    }
  }
});

个字符

atmip9wb

atmip9wb3#

methods: {
incrementGlobalVariable() {
    this.globalVariable+=1;
    return this.globalVariable;
  }
}

字符串
然后:

<div id="app">
  <ul>
    <li v-for="(post, index) in posts" :key="post.id">
      <p>Global Variable @ {{ post.title }}: {{ incrementGlobalVariable() }}</p>
    </li>
  </ul>
  <p>Global Variable: {{ globalVariable }}</p>
</div>


测试结果:

Global Variable @ Post A: 1
Global Variable @ Post B: 2
Global Variable @ Post C: 3
Global Variable: 3

相关问题