我试图将字符串数组作为 prop 传递给子组件，但出现

Vue: Invalid prop: type check failed for prop . Expected Array, got String with value

错误。

使用该组件：

<template>
  <GenericForm title = "Sign Up" button-text= "Sign Up"
               fields="['Username', 'Email', 'Password']"/>
</template>

我不确定我做错了什么。我尝试搜索，但找不到将数组作为 <template> 标签内的 prop 传递的示例。

编辑 ：

父组件：

<template>
  <form 

      class = "signup-form   rounded-lg
              p-10 m-auto  align-middle content-center
              space-y-6
              flex flex-col  items-center justify-center
                ">
    <div class="title-text light-text text-xl" >Signup</div>

<li v-for="(field, index) in fields">
       {{ field.placeholder }}
    </li>

&lt;!&ndash;   <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

    <GenericButton :text  = "buttonText"/>&ndash;&gt;
  </form>
</template>


<script>

import ArticleList from "../../components/articles/ArticleList";
import FormField from "@/components/other/FormField";
import GenericButton from "@/components/buttons/GenericButton";

export default {
  components: {GenericButton, FormField, ArticleList},

  props: {
    title: {
      type: String,
      required: true
    },
    fields:  {
      type: Array,
      required: true
    },
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

编辑 2 ：

我还意识到，当我将 ： 放在子组件中的 fields 前面时，错误就会消失：

<template>
  <GenericForm title = "Sign Up" button-text= "Sign Up"
               :fields="['Username', 'Email', 'Password']"/>
</template>

但尽管没有错误，字段也不会在页面上列出。