[英]Trying to push data to an array from a child component in vue.js but get TypeError: Cannot read property 'push' of undefined"
here is my child component 这是我的孩子部分
<b-container fluid class="bv-example-row">
<b-row>
<b-col cols="2" class="col-speaker">
<b-row>
<b-input-group @keyup.enter="speakerInput" class="input-speaker">
<b-form-input v-model="speaker" placeholder="speaker"></b-form-input>
</b-input-group>
{{speaker}}
<div class="w-100"></div>
<b-col>
<img class="caption-flag" src="../assets/flag (2).png">
</b-col>
</b-row>
</b-col>
<b-col>
<div class="mainDashboard-caption">
<h4 class="caption-timecode">{{start}}-{{end}}</h4>
<b-row>
<b-col cols="11">
<b-form-textarea id="textarea1"
v-model="userInput"
placeholder="Enter something"
:rows="3"
:max-rows="6">
</b-form-textarea>
</b-col>
<b-col>
<input class="caption-reviewed" type="checkbox">
</b-col>
</b-row>
<b-row class="row-buttons">
<b-col class="col-buttons">
<b-button :pressed="false" variant="outline-success" class="caption-merge-next">merge next</b-button>
<b-button :pressed="false" variant="outline-danger" class="caption-merge-prev">merge prev </b-button>
</b-col>
</b-row>
</div>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: 'MainDashboard',
props: {
start: { type: Number, required: true},
end: { type: Number, required: true},
text: '',
},
data () {
return {
userInput: '',
speaker: '',
plainText: false,
}
},
methods: {
speakerInput (speaker) {
console.log(speaker)
this.$emit('post-speaker', speaker)
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
and here is my parent 这是我的父母
<template>
<div class="dashboardView">
<div class="header">
<MainHeader
v-bind:fileName= this.fileName
/>
</div>
<div class="dashboard" v-for='caption in captions' :key='caption.end'>
<MainDashboard
v-bind:start='caption.start'
v-bind:end='caption.end'
v-bind:text='caption.text'
@post-speaker="postSpeaker"
/>
</div>
<div class="footer">
</div>
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios'
import MainHeader from '../components/MainHeader.vue';
import MainDashboard from '../components/MainDashboard.vue';
export default {
name: 'dashboard',
components: {
MainDashboard,
},
data () {
return {
speakers: [],
speaker:'',
captions: [],
text: '',
fileName: '',
result: this.getCookie('csrftoken')
}
},
methods: {
getCookie(key) {
const regexp = new RegExp(`.*${key}=([^;]*)`);
const result = regexp.exec(document.cookie);
if(result) {
return result [1]
}
},
postSpeaker(speaker) {
console.log(speaker)
this.speakers.push(speaker)
console.log(this.speakers)
this.getCookie('csrftoken')
axios.put('https://172.28.128.13/api/transcriptions/1/',{
captions: {
speakers: [this.speakers], captions: [this.captions]
}
},
{
headers: {
'X-CSRFToken': this.result}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
},
created() {
axios.get(`https://172.28.128.13/api/transcriptions/?format=json`)
.then(response => {
// JSON responses are automatically parsed.
this.captions = response.data.results[0].captions
this.fileName = response.data.results[0].media_file
this.speakers = response.data.results[0].captions.speakers
console.log(this.fileName)
console.log(this.captions)
})
.catch(e => {
this.errors.push(e)
})
},
components: {
MainHeader,
MainDashboard,
},
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
im trying to emit the users input data in the child component to the parent component, and push it into speakers array. 我试图将用户在子组件中输入的数据发送到父组件,并将其推入Speaker数组。 it breaks on
this.speakers.push(speaker)
in the parent component, and i get this error 它在父组件中的
this.speakers.push(speaker)
上this.speakers.push(speaker)
,我收到此错误
[Vue warn]: Error in event handler for "post-speaker": "TypeError: Cannot read property 'push' of undefined"
[Vue警告]:“后扬声器”事件处理程序中的错误:“ TypeError:无法读取未定义的属性'push'”
Im sure its something little that i'm doing wrong, any help is appreciated :) 我肯定这是我做错的一点点,感谢您的帮助:)
Your problem is in the child component: 您的问题出在子组件中:
@keyup.enter="speakerInput"
If you notice, speakerInput
expects you to pass speaker
to it so it can ultimately emit the event to the parent. 如果您注意到了,
speakerInput
希望您将speaker
传递给它,以便最终将事件发送给父级。
Change it to: 更改为:
@keyup.enter="speakerInput(speaker)"
Or, change speakerInput
to use the data instead of expecting it to be passed: 或者,更改
speakerInput
以使用数据,而不是期望传递数据:
methods: {
speakerInput () {
console.log(this.speaker)
this.$emit('post-speaker', this.speaker)
}
}
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.