vue js v-for 指令中的函数调用使循环运行进入无限循环，我不知道为什么

Question

我有这个模板：

<template>
<div>
    <div v-for="report in reports">
        <div class="map" v-bind:id="mapID = report.started.toUpperCase()" v-text="report.started">
        {{hello(mapID)}}

    </div>
    </div>
</div>

和这个模型：

<script>
import addmap from '../components/addmap';
export default {

    data: function(){
        return {
            reports: [],
            mapid: "",
            map_id: ''
        }
    },

    mounted: function(){
        this.mapID = this.map_id;
        this.allReport()    
    },

    components: {
        'addmap': addmap
    },

    computed: {
        mapID: {
            get: function(){
                return this.map_id;
            },

            set: function(newValue){
                this.map_id = newValue.toUpperCase();
            }
        }   
    },

    methods: {
        hello: function(val){
            console.log(val)    
        },
        allReport: function(){
            axios.get('/reports').then(response => {
                this.reports = response.data
            });
        }
    }

}

每当我加载此视图时，它都会在控制台中报告无限循环，我不知道为什么。

当我只打印文本时它工作正常，但每当我尝试在每个循环上调用一个函数时，它报告一个无限循环。

我不知道为什么会这样，任何可能的建议或建议将不胜感激。谢谢。

Answer 1

你的问题是这样的：

v-bind:id="mapID = report.started.toUpperCase()"

您正在渲染期间更改反应数据属性，这会触发重新渲染，这会让您再次更改属性，从而触发重新渲染，依此类推。 .

简而言之：不要这样做。我不确定您要实现什么目标，所以我不确定该建议什么。也许只是这个？

v-bind:id="report.started.toUpperCase()"

vue js v-for 指令中的函数调用使循环运行进入无限循环，我不知道为什么

function call within a vue js v-for directive makes the loop run into an infinite loop and I don't know why

javascript

vue.js

vue-component

vuejs2

vue js v-for 指令中的函数调用使循环 运行 进入无限循环，我不知道为什么

function call within a vue js v-for directive makes the loop run into an infinite loop and I don't know why

javascript

vue.js

vue-component

vuejs2

vue js v-for 指令中的函数调用使循环运行进入无限循环，我不知道为什么