vue3 watch中调用方法报错

在Vue3中，当在watch中使用箭头函数时，会导致this无法访问到。这是因为箭头函数没有自己的this，它会继承外部作用域的this。所以在watch中使用箭头函数时，this指向的是外部作用域，而不是Vue实例。为了解决这个问题，你需要将箭头函数改成普通的函数形式。例如，将watch中的箭头函数改成function形式，如下所示：

watch: {
  inputValue: function(newValue) {
    console.log(newValue);
    this.getInfo();
  }
},

这样就可以正确地访问到this，并调用相应的方法了。[1][2]

另外，如果你想了解更多关于watch的使用方式，可以参考Vue官方文档中关于watch的部分。[2]

相关问题

vue3的main.js中引用axios报错 Maximum call stack size exceeded

这个错误通常是由于在Vue组件中无限递归调用导致的。可能是因为你在Vue组件中使用了axios，而axios又触发了组件的重新渲染，从而导致了无限递归调用。为了解决这个问题，你可以尝试以下几种方法：

1.将axios请求放在Vue组件的生命周期函数中，例如mounted()或created()中，而不是在组件的template中。

2.使用Vue的watch属性来监听数据的变化，而不是在template中直接使用axios。

3.使用Vue的computed属性来计算数据，而不是在template中直接使用axios。

4.检查你的代码是否存在无限循环调用的情况，例如在一个函数中调用了自身。

<<相关问题>>:
1.如何在Vue组件中使用axios？
2.如何避免在Vue组件中出现无限递归调用？
3.如何使用Vue的watch属性和computed属性？

VUE2 环境下 有两个字符串字段part和item 判断要么两个都为undefined或者两个都有值时不报错，要是其中一个有值另一个undefined 则提示报错

在 Vue2 中，你可以使用 Vue 的计算属性 (Computed Property) 和三元表达式 (Ternary Operator) 来实现这个逻辑。首先创建一个计算属性 `checkValues`，它会检查 `part` 和 `item` 是否同时存在并且都有值：

<template>
  <div v-if="!checkValues">
    <!-- 这里显示错误信息 -->
    {{ errorMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      part: undefined,
      item: undefined,
      errorMessage: '',
    };
  },
  computed: {
    checkValues() {
      return this.part !== undefined && this.item !== undefined;
    },
  },
  watch: {
    // 观察 part 和 item 变化，并在其中之一改变时更新错误消息
    'part(item)': 'handleValueChanged',
  },
  methods: {
    handleValueChanged() {
      if (!this.checkValues) {
        this.errorMessage = '部分字段缺失';
      } else {
        this.errorMessage = '';
      }
    },
  },
};
</script>

在这个例子中，我们使用了计算属性 `checkValues` 来判断是否两者都有值，如果它们都不为 `undefined`，则 `checkValues` 返回 `true`。当 `part` 或 `item` 的值发生变化时，我们会调用 `handleValueChanged` 方法更新错误消息。

如果你需要在控制台打印错误信息而不是在模板中显示，可以在相应的地方添加一个自定义的错误处理函数。