【发布时间】：2021-01-15 13:44:18
【问题描述】：
我正在使用 VueJS Vuetify 框架，我需要从另一个模板打开一个对话框表单 - 作为组件模板导入 - 单击 Meals.vue 中的 ChangeMealDialog 按钮后，模态应该打开。这是我的设置：
父组件 Meals.vue
<template>
<div id="app">
<v-app id="inspire">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Days</th>
<th class="text-left">Meals</th>
<th class="text-left">Calories</th>
<th class="text-right">
<router-link to="/addmeal">
<v-btn color="primary" small right>
Add Meal
</v-btn>
</router-link>
</th>
</tr>
</thead>
<tbody class="normalCalorie">
<tr v-for="meal in meals.meals" :key="meal._id">
<td class="text-left">{{ meal.date }}</td>
<td class="text-left">{{ meal.text }}</td>
<td class="text-left">{{ meal.numOfCalories }}</td>
<td class="text-right">
<ChangeMealDialog ref="dialogRef">
<template @click="dialog = true" slot="dialogActivetor">
<v-btn slot="dialogActivator" color="primary" @click="$refs.dialogRef.setDefaultTable()" dark fab small right>
<v-icon small>mdi-pencil</v-icon>
</v-btn>
</template>
</ChangeMealDialog>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-app>
</div>
</template>
<script>
import {
fetchMeals,
deleteMeal,
} from '@/api';
import ChangeMealDialog from './ChangeMealDialog';
export default {
data() {
return {
dialog: false,
meals: [],
}
},
created() {
this.getMeals();
},
methods: {
async getMeals() {
this.meals = await fetchMeals();
},
async deleteMeal() {
await deleteMeal(this.meal._id)
},
},
components: {
ChangeMealDialog,
}
}
</script>
子组件 ChangeMealDialog.vue
<template>
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on" fab small right>
<v-icon small>mdi-pencil</v-icon>
</v-btn>
</template>
<v-card>
<v-toolbar color="primary" dark flat>
<v-toolbar-title>Change Meal</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field label="Date*" v-model="meal.date" required></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Time*" v-model="meal.time" required></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Text*" v-model="meal.text" required></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Calorie*" v-model="meal.calorie" required></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-tooltip left>
<ApproveDialog @approve="updateMeal">
<v-btn @click="dialog = false" fab dark small color="warning">
</v-btn>
</ApproveDialog>
Save
</v-tooltip>
<v-btn color="primary" text @click="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
dialog: false,
}
},
props: [
'meal',
],
methods: {
async updateMeal() {
await this.$store.dispatch('updateMeal', this.meal._id);
}
}
}
</script>
如何打开对话框？
子组件 Approve.vue
<template>
<v-dialog v-model="dialog" max-width="400px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="error" dark v-bind="attrs" v-on="on" fab x-small right>
<v-icon small>mdi-delete</v-icon>
</v-btn>
</template>
<v-card>
<v-card-title class="headline">Are you sure?</v-card-title>
<v-card-actions>
<v-btn @click="close">
No
</v-btn>
<v-spacer />
<v-btn @click="submit">
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
dialog: false,
};
},
props: ['id'],
methods: {
submit() {
this.$emit('approve', this.id);
this.close();
},
close() {
this.dialog = false;
this.$emit('dialClose');
},
},
};
</script>
如何打开对话框？
【问题讨论】：
标签： vue.js vuetify.js