Vue中Axios请求无限循环问题求助：联动下拉框触发重复请求

核心问题 #

• 模板中MazSelect的change事件绑定错误：你使用了:change="visitTypeChange()"，这种写法会立即执行方法，而非在下拉框值变更时触发。
• 每次visitTypeChange执行后，会更新reason_list，而reason_list是另一个下拉框的options，这会触发组件重新渲染，进而再次执行visitTypeChange()，形成无限循环，导致接口被反复调用。

修正方案 #

将:change改为Vue的事件绑定语法@change，并且去掉方法后的括号，只传递方法名：

<MazSelect v-model="FORM.VISIT_TYPE"
           :options="visittype_list"
           placeholder="Select Visit Type" 
           size="sm"
           option-value-key="ID"
           option-label-key="TEXT"
           option-input-value-key="TEXT"
           @change="visitTypeChange"/>

原因说明 #

• @change是Vue用于监听组件事件的语法，绑定方法时如果加括号，会在组件渲染时立刻执行该方法；不加括号则是将方法作为事件处理函数，仅在事件触发（下拉框值变更）时执行。
• 修正后，只有当VISIT_TYPE下拉框的选中值真正变化时，才会调用visitTypeChange方法请求接口，避免了无限循环。

内容的提问来源于stack exchange，提问作者Reyn