javascript - vue2的方法搬过来vue3这里报了三个错，这个要怎么解决？

Question

vue2的方法搬过来vue3这里报了三个错，这个要怎么解决？

const findPlanModelCode = () => {  if (!formData.value.airlines) {    return;  }  findPlanModelCode({    airlines: formData.value.airlines  }).then((res) => {    // this.codeList = res.data;    /* this.codeList = res.data.content.map(function(obj) {          return obj        }) */  });};

Answer 1

目测将 const findPlanModelCode = () => {...} 改一下名就可以了 const toFindPlanModelCode = () => {...}

Answer 2

你在 findPlanModelCode 方法内部调用自身，先不说你这样在调用 findPlanModelCode 会陷入无限循环，你定义的方法是不需要传入参数的，并且没有返回值，而你调用的时候传入了参数且调用了返回对象的 .then 方法

是否你引入了一个外部的调用请求的方法 findPlanModelCode ，然后在内部又重命名了一个相同名字的方法导致了这一问题？

Answer 3

这个错误可能是因为 Vue 3 的响应式系统与 Vue 2 有所不同。在 Vue 3 中，你不能直接修改 reactive 对象的属性，而应该使用 set 方法来更新它们。

在你的代码中，formData.value.airlines 是一个响应式对象，如果你直接修改它的属性，Vue 3 可能无法正确地跟踪这些更改，导致一些意想不到的错误。

你可以尝试使用 set 方法来更新 formData.value.airlines 的属性，如下所示：

const findPlanModelCode = () => {  if (!formData.value.airlines) {    return;  }  findPlanModelCode({    airlines: [...formData.value.airlines]  }).then((res) => {    // this.codeList = res.data;    /* this.codeList = res.data.content.map(function(obj) {          return obj        }) */  });};

在这个修改后的代码中，我用 [...formData.value.airlines] 来创建一个新的数组，然后将其传递给 findPlanModelCode 函数。这样，Vue 3 可以跟踪到 formData.value.airlines 的变化，并且可以正确地更新视图。