"prop" 是未定义的，虽然它被正确传递

Question

我一直在关注 VueJS 官方文档，了解如何使用 props 将数据传递给子组件；虽然我没有使用字符串模板。我知道当你的道具是骆驼案时会发生什么；你应该把它写成kebab case。

然而，情况并非如此，因为它都是小写的并且不起作用。

我正在使用 nuxt，并将我的工作分成文件，它们是：

<template>
<div class="row">
    <input type="text" name="" id="" placeholder="Write your question" v-model="text">
    <select v-model="selectedField">
        <option v-for="option in options" :key="option.id" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <button class="btn btn-sm btn-primary" @click="$emit('add-field')"
    v-bind:class="{ disabled: ($parent.count <= 1 && $parent.count == identifier) }">
    >{{identifier}}</button>
    <button class="btn btn-sm btn-danger" @click="$emit('delete-field')">-</button>
</div>

现在是它的 JS 文件：

export default {
data () {
  return {
    options: [
        {
            id: 1,
            value: 1,
            text: "Radio"
        },
        {
            id: 2,
            value: 2,
            text: "Rate"
        },
        {
            id: 3,
            value: 3,
            text: "Text"
        }
    ],
    props: ['identifier'],
    selectedField: 1,
    text: "",
  }
  },
  }

现在，对于我的父组件：

<template>
<div class="offset-md-3" id="qz">
    <form-maker
        v-for="item in questions" :key="item._id"
        v-on:add-field="addField()"
        v-on:delete-field="deleteField(item._id)"
        v-bind:identifier="item._id" <<--What I want to set
        ref="child"
    ></form-maker>
<button @click="saveForm" class="btn btn-large btn-success">SAVE</button>

</div>
</template>

最后：

var vm = null;

export default {
    layout: 'admin',
    components: {
        formMaker
    },
    data() {
        return {
            count: 1,
            questions: [{
                _id: 1//static
            }]
        }
    },
}

我想做的是，使用道具进行一些验证，但它会引发下一个错误：

属性或方法“标识符”未在实例上定义，但 在渲染期间引用。确保此属性是反应性的， 无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。

谢谢。

Answer 1

这就是你出错的地方。道具不应该在data()。见下面的代码sn-p

<script>
export default {
    props: ['identifier'],
    data() {
        return {
            options: [
                {
                    id: 1,
                    value: 1,
                    text: "Radio"
                },
                {
                    id: 2,
                    value: 2,
                    text: "Rate"
                },
                {
                    id: 3,
                    value: 3,
                    text: "Text"
                }
            ],           
            selectedField: 1,
            text: "",
        }
    }
}
</script>