"prop" 未定义,但已正确传递
"prop" is undefined though it's being passed correctly
我一直在关注 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.
谢谢。
这就是你出错的地方。道具不应在 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>
我一直在关注 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.
谢谢。
这就是你出错的地方。道具不应在 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>