Vue.js 在v-for中添加多个字段会导致无限循环

我正在尝试为用户添加付款表单以填写字段。类型=='payment'。然而，当我在v-for循环中添加多个字段时，我会得到一个“组件渲染函数中可能有一个无限更新循环”错误。我能做些什么来避免这种情况？下面是我想做的一小段

<div v-for="(field, key) in page.fields" :key="key">
 <v-row v-if="field.type === 'payment'">
        <v-col cols="12" sm="8">
            <v-text-field //ADDING THIS FIELD BY ITSELF WORKS FINE
                label="Card Number" 
                prepend-inner-icon="credit_card" 
                v-model="card_number"
            />
        </v-col>
        <v-col cols="12" sm="4">
            <v-text-field //WHEN I TRY TO ADD IN THIS FIELD, THE LOOP ERROR OCCURS
                label="CVV" 
                v-model="cvv"
            />
        </v-col>
    </v-row>
</div>

<script>
  computed: {
    ...mapGetters('formbuilder', ['form'])
  },
  watch: {
    form(newVal) {
      this.page = newVal;
    }
  },
  data() {
    return {
      cvv: '',
      card_number: '',
      page: {}
    }
   }
</script>

计算：{
…映射器（'formbuilder'，['form']）
},
观察：{
表格（newVal）{
this.page=newVal；
}
},
数据（）{
返回{
cvv:“”，
卡号：''，
页码：{}
}
}

从哪里获得字段？是道具、数据还是计算的？@bravemaster computed Property我认为

字段

导致了一个问题。你能显示

字段的代码吗？@bravemaster我添加了更多上下文above@JDub看起来仍然缺少一些相关的代码位。你能试着把代码减少到一个最小的本地示例，然后在这里发布吗？您提到的错误消息是一个无限更新循环，这与
v-for
无关。这只是意味着在渲染过程中的某个地方，您正在更新一些反应数据，这会导致它再次渲染。