"prop" 未定义，但已正确传递

Question

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

然而，情况并非如此，因为它都是小写字母，无法正常工作。

我正在使用 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
            }]
        }
    },
}

我想做的是，使用 prop 进行一些验证，但它会抛出下一个错误：

Property or method "identifier" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

谢谢。

Answer 1

这就是你出错的地方。道具不应在 data() 中。请参阅下面的代码片段

<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>

"prop" 未定义，但已正确传递

"prop" is undefined though it's being passed correctly

vue.js

nuxt.js

vue-props