v-for 死循环（infinite update loop）

报错分析

在嵌套v-for循环中，需要给对数组每一项进行处理，使用一个method方法，导致渲染失败，控制台报错死循环，浏览器有可能会卡死。应该先将需要处理数组对象提前处理好，然后再给到template循环渲染，而不是直接丢给template去循环渲染。

<template>
  <div class="main">
    <el-button
      v-for="item in buttonList"
      :key="item.value"
      :type="type(item)"
      >{{ item.label }}</el-button
    >
  </div>
</template>

<script>
export default {
  name: "Test-1",
  data() {
    return {
      buttonList: [
        {
          value: 30,
          type: "primary",
          label: "按钮一"
        },
        {
          value: 40,
          type: "warning",
          label: "按钮二"
        },
        {
          value: 50,
          type: "info",
          label: "按钮三"
        },
        {
          value: 60,
          type: "danger",
          label: "按钮四"
        }
      ]
    };
  },
  methods: {
    type(item) {
      if (item.type == "danger") {
        item.value++;
        return item.type;
      } else {
        return item.type;
      }
    }
  }
};
</script>

<style scoped></style>

解决方式

就是先处理，再赋值渲染。

<template>
  <div class="main">
    <el-button v-for="item in buttonList" :key="item.value" :type="item.type">
      {{ item.label }}</el-button
    >
  </div>
</template>

<script>
export default {
  name: "Test-1",
  data() {
    return {
      buttonList: [
        {
          value: 30,
          type: "primary",
          label: "按钮一"
        },
        {
          value: 40,
          type: "warning",
          label: "按钮二"
        },
        {
          value: 50,
          type: "info",
          label: "按钮三"
        },
        {
          value: 60,
          type: "danger",
          label: "按钮四"
        }
      ]
    };
  },
  created() {
    this.buttonList.forEach(item => {
      if (item.type == "danger") {
        item.value++;
        item.type = item.type;
      } else {
        item.type = item.type;
      }
    });
  },
  methods: {}
};
</script>
<style scoped></style>