Invalid prop: type check failed for prop "icon". Expected String, got Array

这个错误提示表示你在 Vue.js 中传递给某个组件的 `icon` prop (属性) 类型检查失败，预期应该是字符串类型，但实际上接收到了数组类型。`icon` 这个属性通常用于设置组件内的图标，例如在 Element UI 的 Button 组件中，期望的是一个单个的图标名字符串，比如 `'el-icon-plus'`。

如果你确实需要传入一个数组，那可能是你误解了组件的用法或者是版本更新导致 API 改变。正确的做法通常是提供一个单独的字符串作为图标的名称。修复这个问题，你需要检查你的代码并确保 `icon` 属性传递的是一个有效的图标名字符串，而不是一个数组。

修复代码样例：

<template>
  <el-button type="primary" :icon="'el-icon-plus'" @click="dialogVisible = true" style="margin-top: 10px;margin-left: 10px;"></el-button>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

相关问题

Invalid prop: type check failed for prop "icon". Expected String

根据提供的引用内容，这是一个关于Vue.js中组件props类型检查失败的问题。具体来说，组件期望一个字符串类型的icon属性，但实际传入的是一个对象类型的"[object Object]"，导致类型检查失败。

解决这个问题的方法是，检查传入组件的icon属性是否为字符串类型，如果不是，则需要将其转换为字符串类型再传入组件。可以使用toString()方法将对象类型转换为字符串类型。

以下是一个示例代码：

props: {
  icon: {
    type: String,
    required: true
  }
},
mounted() {
  // 检查icon属性是否为字符串类型
  if (typeof this.icon !== 'string') {
    // 将icon属性转换为字符串类型
    this.icon = this.icon.toString();
  }
}

Invalid prop: type check failed for prop thDataArr. Expected , got Array

当在Vue项目中通过Props属性向子组件传递值时，如果传递的值的类型与子组件中定义的类型不匹配，就会出现Invalid prop: type check failed for prop的错误信息。在这个错误信息中，会提示期望的类型和实际传递的类型不匹配。例如，当传递一个数组给一个期望接收对象类型的props时，就会出现类似于Invalid prop: type check failed for prop thDataArr. Expected Object, got Array的错误信息。

解决这个问题的方法是，在父组件中传递给子组件的值的类型必须与子组件中定义的类型相匹配。如果子组件中定义的类型是对象，那么在父组件中传递给子组件的值也必须是一个对象。如果子组件中定义的类型是数组，那么在父组件中传递给子组件的值也必须是一个数组。

以下是一个解决这个问题的例子：

假设子组件中定义了一个props，期望接收一个对象类型的值：

props: {
  person: Object
}

在父组件中，如果传递一个数组给这个props，就会出现Invalid prop: type check failed for prop的错误信息：

<template>
  <div>
    <child-component :person="['John', 'Doe']"></child-component>
  </div>
</template>

正确的做法是传递一个对象给这个props：

<template>
  <div>
    <child-component :person="{firstName: 'John', lastName: 'Doe'}"></child-component>
  </div>
</template>