due to business requirements, the list display data is defined as a child component plan, and then called in the for loop of the parent primary key, which is similar to the official todo instance of vue. But in my child components, the view button is defined, and I want to display the dialog box after clicking it. The dialog box here is the component Model, in iview. I defined the component Model style and encapsulated another component, which was put into the original child component plan, but it didn"t work. For further verification, I took the Model component directly into my plan component, but it didn"t work. The plan component looks something like this (I have defined data, but I didn"t show it, including this model1=true):
<template>
<div>
<Row type="flex" justify="center" align="middle">
<Col span="2"><input type="checkbox" @change="toggle(plan.id)" :checked="isDone"></Col>
<Col span="10"><del v-if="isDone">{{plan.title}}</del><span v-else>{{plan.title}}</span></Col>
<Col span="8">{{plan.create_time}}</Col>
<Col span="2"><Icon @click="showcontent" type="md-eye" /></Col>
<Col span="2"><Icon type="md-trash" /></Col>
</Row>
<content :model1="model"></content>
<Modal v-model="modal1" width="360">
<p slot="header" style="color:-sharpf60;text-align:center">
<Icon type="ios-information-circle"></Icon>
<span>Delete confirmation</span>
<div style="text-align:center">
After this task is deleted, the downstream 10 tasks will not be implemented.
Will you delete it?
</div>
<div slot="footer">
<Button type="error" size="large">Delete</Button>
</div>
</Modal>
</div>
</template> then it occurred to me that my parent component uses the drawer Drawer, in iview, that is, through the click of a button to display the drawer, the drawer displays the sub-component data, at this time the sub-component data can be displayed, but this Model can not be displayed, is it related to my Drawer? Show that Drawer uses a mask layer, is it not possible to reuse Model? is there any solution?
finally attach the procedure code for my parent component to use plan:
<Drawer width="300" title="" placement="left" :closable="false" v-model="value2">
<Row type="flex" align="middle">
<Col span="24" style="height: 45px" v-for="(plan,index) in today_plan" :key="index">
<plans :plan="plan"></plans>
</Col>
</Row>
</Drawer>