Invalid prop: type check failed for prop "per". Expected String with value "20", got Number with value 20.

这个错误通常是由于在Vue.js中使用组件时，传递给组件的属性类型与组件期望的属性类型不匹配导致的。在这种情况下，组件期望一个字符串类型的属性，但实际上传递了一个数字类型的属性。要解决这个问题，可以将数字类型的属性转换为字符串类型，例如使用toString()方法。以下是一个例子：

<template>
  <div>
    <my-component :per="percent.toString()"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      percent: 20
    }
  }
}
</script>

在这个例子中，我们将percent属性转换为字符串类型，并将其传递给MyComponent组件的per属性。这样就可以避免Invalid prop错误了。

相关问题

Invalid prop: type check failed for prop prefixicon. Expected string with value NaN,got number with value NaN.

根据提供的引用内容，你遇到了一个类型错误的问题。报错信息是"Invalid prop: type check failed for prop prefixicon. Expected string with value NaN, got number with value NaN."。这个错误表明你传递的值的类型不正确。期望的类型是字符串，但你传递的是一个NaN的数字值。

解决这个问题的方法是将传递的值改为字符串形式。确保你传递的值是一个有效的字符串，而不是一个NaN的数字值。

以下是一个示例代码，演示如何解决这个问题：

// 传递一个有效的字符串作为参数
<YourComponent prefixicon="validString" />

// 或者将NaN的数字值转换为字符串
<YourComponent prefixicon={String(NaN)} />

请注意，根据你的具体情况，你可能需要将上述示例代码中的"YourComponent"替换为你实际使用的组件名称。

Invalid prop: type check failed for prop "per". Expected String with value "90", got Number with value 90.

这个报错是因为我们传递给组件的类型与组件期望的类型不一致导致的。组件期望的是一个字符串类型的值，但是我们传递的是一个数字类型的值。解决这个问题的方法是将数字类型的值转换为字符串类型的值再传递给组件。可以使用以下代码进行转换：

const per = 90;
const perStr = per.toString(); // 将数字类型的值转换为字符串类型的值

然后将`perStr`作为参数传递给组件即可。