触发组件对话框

问题描述

我正在尝试学习 VueJS 和 ElementUI 以移植到旧版应用程序。我对 VueJS 很陌生，正在努力掌握基础知识。了解可重用组件对我来说很关键，所以我正在尝试让示例对话框正常工作。有人可以帮我弄清楚为什么当我单击“测试”页面上的按钮时不会显示对话框。我已经注册了该组件，但不确定如何触发它。示例代码基于我找到的组件教程和 ElementUI 表单示例。

测试.vue

<template>
  <el-button
    type="success"
    @click="dialogFormVisible = true"
    size="small"
    icon="el-icon-plus"
    >click to open the Dialog</el-button>
  
    <Dialog v-model="dialogFormVisible" />
  
</template>

 <script>
 import Dialog from "@/components/CustomerForm.vue";

 export default {
  name: "App",components: { Dialog },data() {
    return {
      dialogFormVisible: false,};
  },methods: {
    submit() {
      console.log("confirm");
      this.dialogFormVisible = false;
    },},};
</script>

CustomerForm.vue

<template>
  <el-dialog title="Customer Name" v-model="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="Activity name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai"></el-option>
          <el-option label="Zone two" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="Pick a date"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="Pick a time"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,form: {
        name: "",region: "",date1: "",date2: "",formlabelWidth: "120px",methods: {
    submit() {
      console.log("submit!");
    },};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）