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
            }]
        }
    },
}

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

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

谢谢。

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”，但未定义

1 个答案: