[英]Vue parent component doesn't recognize emit from child
I am trying to make a website which features multiple cards and when a card is selected it should expand. I am trying to make a website which features multiple cards and when a card is selected it should expand. The code from the card component is:
卡片组件的代码是:
<template>
<v-card
class="mx-auto"
max-width="90%"
min-height="600"
app
@click="selectCard(id)"
>
<!-- <img v-bind:src="img" /> -->
<v-img
dark
class="white--text align-end"
height="400px"
:src="require('../assets/' + img)"
:alt="`${title}`"
>
</v-img>
<v-card-title>
<p class="text-wrap">{{title}}</p>
</v-card-title>
<v-card-subtitle class="pb-0">{{taglist}}</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{text}}</div>
</v-card-text>
<v-card-actions>
<v-btn
color="orange"
text
@click="selectCard(id)"
>
Read More
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: 'Card',
computed: {
taglist() {
let list = "";
for (let t of this.tags) {
list = list + t + ", ";
// console.log("TEST:" + (1===this.id))
}
list = list.substring(0, list.length-2);
return list;
}
},
methods: {
selectCard(id) {
this.$emit('expandCard',id)
}
},
props: {
title: String,
tags: Array,
img: String,
text: String,
id: Number,
}
}
</script>
And the parent component that should be listening is:应该监听的父组件是:
<template>
<div class="projects">
<v-main>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
v-for="data in info"
:key="data.index"
>
<Card
:title="data.title"
:tags="data.tags"
:img="data.img"
:text="data.text"
:id="data.index"
/>
</v-col>
</v-row>
<!-- <v-on:expandCard="showCard"/> -->
<div> {{reached}} </div>
<v-card
v-on:expandCard="showCard"
v-if="dialog">
<p> {{reached}}</p>
<v-img
dark
class="white--text align-center"
height="80%"
:src="require('../assets/' + info[id].img)"
:alt="`${info[id].title}`"
>
</v-img>
<v-card-title>
<p class="text-wrap">{{info[id].title}}</p>
</v-card-title>
<v-card-subtitle class="pb-0">{{info[id].tags}}</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{info[id].text}}</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="dialog = false">Return</v-btn>
</v-card-actions>
</v-card>
</v-main>
</div>
</template>
<script>
// @ is an alias to /src
import Card from '@/components/Card.vue'
export default {
name: 'Projects',
methods: {
showCard(id) {
this.dialog = true;
this.id = id
console.log(this.id)
},
reached() {
console.log("reached")
}
}
</script>
What i want is to select a card and then pass the id of the card to the parent and then the parent renders that card above all other cards.我想要的是 select 一张卡,然后将卡的 id 传递给父母,然后父母将该卡呈现在所有其他卡之上。
The event is emitted from the Card
component, but your listener is on a v-card
in the parent component.该事件是从
Card
组件发出的,但您的侦听器位于父组件的v-card
上。 The listener should be on Card
instead:侦听器应该在
Card
上:
<!-- BEFORE: -->
<!-- <v-card v-on:expandCard="showCard"> -->
<Card v-on:expandCard="showCard">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.