Javascript Vuejs-如何使用单个表单添加和编辑

我正在尝试使用相同的组件来处理我的应用程序的添加和编辑部分。我正在使用Firebase，所以我正在检查route参数中是否有

id

，如果有，它将作为编辑表单呈现，如果没有，则作为添加表单呈现。但这不起作用，它有一些古怪的行为

以下是

ContactForm

组件的代码

<template>
  <div>
    <div class="card mb-3">
      <div class="card-header">{{ editing ? 'Edit' : 'Add' }} Contact</div>
      <div class="card-body">
        <form @submit.prevent="addContact">
          <TextInputGroup
            label="Name"
            name="name"
            placeholder="Enter your name..."
            v-model="contact.name"
            for="name"
          />
          <TextInputGroup
            type="email"
            label="Email"
            name="email"
            placeholder="Enter your email..."
            v-model="contact.email"
          />
          <TextInputGroup
            type="phone"
            label="Phone"
            name="phone"
            placeholder="Enter your phone number..."
            v-model="contact.phone"
          />

          <input type="submit" value="Add Contact" class="btn btn-block btn-light" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import TextInputGroup from "../layout/TextInputGroup";
import { db } from "../../firebase";

export default {
  components: {
    TextInputGroup
  },
  data() {
    return {
      contact: "",
      editing: false,
      email: "",
      name: "",
      phone: ""
    };
  },
  methods: {
    addContact() {
      const newContact = {
        name: this.name,
        email: this.email,
        phone: this.phone,
        createdAt: new Date()
      };
      db.collection("contacts")
        .add(newContact)
        .then(docRef => {
          console.log("Document written with ID: ", docRef.id);
        })
        .catch(error => {
          console.error("Error adding document: ", error);
        });
      this.$router.push("/");
    },
    getContactById() {
      db.collection("contacts")
        .doc(this.$route.params.id)
        .get()
        .then(snapshot => {
          if (!snapshot.exists) return;
          this.contact = snapshot.data();
        });
    },
    updateContact() {
      const newContact = {
        name: this.contact.name,
        email: this.contact.email,
        phone: this.contact.phone
      };
      db.collection("contacts")
        .doc(this.$route.params.id)
        .update(newContact)
        .then(() => {
          console.log("Updated document with ID: ");
        })
        .catch(function(error) {
          console.error("Error updating document: ", error);
        });
      this.$router.push("/");
    }
  },
  mounted() {
    if ("id" in this.$route.params) {
      this.getContactById();
      this.editing = true;
      console.log("id");
    } else {
      console.log("ups");
      // this
    }
  }
};
</script>

{{编辑？'Edit'：'Add'}}联系人
从“./layout/TextInputGroup”导入TextInputGroup；
从“../../firebase”导入{db}”；
导出默认值{
组成部分：{
文本输入组
},
数据（）{
返回{
联系人：“，
编辑：错，
电邮：“，
姓名：“，
电话：“
};
},
方法：{
addContact（）{
常数newContact={
姓名：this.name，
电子邮件：this.email，
电话：这个电话，
createdAt:新日期（）
};
db.收集（“联系人”）
.add（新联系人）
。然后（docRef=>{
console.log（“使用ID编写的文档：”，docRef.ID）；
})
.catch（错误=>{
console.error（“添加文档时出错：”，错误）；
});
这是。$router.push（“/”）；
},
getContactById（）{
db.收集（“联系人”）
.doc（此.$route.params.id）
.get（）
。然后（快照=>{
如果（！snapshot.exists）返回；
this.contact=snapshot.data（）；
});
},
updateContact（）{
常数newContact={
姓名：this.contact.name，
电子邮件：this.contact.email，
电话：this.contact.phone
};
db.收集（“联系人”）
.doc（此.$route.params.id）
.更新（新联系人）
.然后（（）=>{
日志（“ID为的更新文档”）；
})
.catch（函数（错误）{
控制台错误（“更新文档时出错：”，错误）；
});
这是。$router.push（“/”）；
}
},
安装的（）{
if（本$route.params中的“id”）{
这个.getContactById（）；
this.editing=true；
控制台日志（“id”）；
}否则{
控制台日志（“ups”）；
//这个
}
}
};

---

这是我刚刚克隆了您的存储库，并在本地进行了测试，添加了修复，以使用单一表单进行编辑和添加

这是下面文件的代码，只需复制粘贴在下面提到的文件中的代码

src/components/contact/ContactForm.vue

<template>
  <div>
    <div class="card mb-3">
      <div class="card-header">{{ editing ? 'Edit' : 'Add' }} Contact</div>
      <div class="card-body">
        <form @submit.prevent="addContact">
          <TextInputGroup
            label="Name"
            name="name"
            placeholder="Enter your name..."
            v-model="contact.name"
            for="name"
          />
          <TextInputGroup
            type="email"
            label="Email"
            name="email"
            placeholder="Enter your email..."
            v-model="contact.email"
          />
          <TextInputGroup
            type="phone"
            label="Phone"
            name="phone"
            placeholder="Enter your phone number..."
            v-model="contact.phone"
          />

          <input type="submit" value="Add Contact" class="btn btn-block btn-light" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import TextInputGroup from "../layout/TextInputGroup";
import { db } from "../../firebase";

var temp = Object.freeze({
      name: '',
      email: '',
      phone: '',
    });

export default {
  components: {
    TextInputGroup
  },
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    

    return {
      contact: Object.assign({}, temp),
      editing: false,
    };
  },
  methods: {
    addContact() {
      this.contact.createdAt = new Date();
      db.collection("contacts")
        .add(this.contact)
        .then(docRef => {
          console.log("Document written with ID: ", docRef.id);
        })
        .catch(error => {
          console.error("Error adding document: ", error);
        });
      this.$router.push("/");
    },
    getContactById() {
      db.collection("contacts")
        .doc(this.$route.params.id)
        .get()
        .then(snapshot => {
          if (!snapshot.exists) return;
          this.contact = snapshot.data();
        });
    },
    updateContact() {
      db.collection("contacts")
        .doc(this.$route.params.id)
        .update(this.contact)
        .then(() => {
          console.log("Updated document with ID: ");
        })
        .catch(function(error) {
          console.error("Error updating document: ", error);
        });
      this.$router.push("/");
    }
  },
  created() {
    if ("id" in this.$route.params) {
      this.getContactById();
      this.editing = true;
      console.log("id");
    } else {
      console.log("ups");
      // this
    }
  },
  watch: {
    type(val) {
      if (val == 'add') {
        this.contact = Object.assign({}, temp);
      }
    }
  }
};
</script>

<template>
  <ContactForm :type="formType" />
</template>

<script>
// @ is an alias to /src
import ContactForm from "@/components/contact/ContactForm.vue";

export default {
  name: "home",
  data() {
    return {
      formType: '',
    };
  },
  components: {
    ContactForm
  },
  watch: { 
   '$route.query.type': {
      handler: function(type) {
        this.formType = type;
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

{{编辑？'Edit'：'Add'}}联系人
从“./layout/TextInputGroup”导入TextInputGroup；
从“../../firebase”导入{db}”；
var temp=Object.freeze({
名称：“”，
电子邮件：“”，
电话：''，
});
导出默认值{
组成部分：{
文本输入组
},
道具：{
类型：{
类型：字符串，
默认值：“”，
},
},
数据（）{
返回{
联系人：Object.assign（{}，temp），
编辑：错，
};
},
方法：{
addContact（）{
this.contact.createdAt=新日期（）；
db.收集（“联系人”）
.add（this.contact）
。然后（docRef=>{
console.log（“使用ID编写的文档：”，docRef.ID）；
})
.catch（错误=>{
console.error（“添加文档时出错：”，错误）；
});
这是。$router.push（“/”）；
},
getContactById（）{
db.收集（“联系人”）
.doc（此.$route.params.id）
.get（）
。然后（快照=>{
如果（！snapshot.exists）返回；
this.contact=snapshot.data（）；
});
},
updateContact（）{
db.收集（“联系人”）
.doc（此.$route.params.id）
.update（this.contact）
.然后（（）=>{
日志（“ID为的更新文档”）；
})
.catch（函数（错误）{
控制台错误（“更新文档时出错：”，错误）；
});
这是。$router.push（“/”）；
}
},
创建（）{
if（本$route.params中的“id”）{
这个.getContactById（）；
this.editing=true；
控制台日志（“id”）；
}否则{
控制台日志（“ups”）；
//这个
}
},
观察：{
类型（val）{
如果（val=='add'）{
this.contact=Object.assign（{}，temp）；
}
}
}
};

src/components/contact/ContactItem.vue

<template>
  <div>
    <div class="card card-body mb-3">
      <h4>
        {{ contact.name }}
        <i
          class="fas fa-sort-down pointer"
          @click="showContactInfo = !showContactInfo"
        ></i>
        <i class="fas fa-times delete right delete" @click="deleteContact(contact.id)"></i>
        <router-link :to="{path: `contact/edit/${contact.id}`, params: { id: contact.id }, query: { type: 'edit' }}">
          <i class="fas fa-pencil-alt edit right"></i>
        </router-link>
      </h4>
      <ul class="list-group" v-if="showContactInfo">
        <li class="list-group-item">Email: {{ contact.email }}</li>
        <li class="list-group-item">Phone: {{ contact.phone }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { db } from "../../firebase";

export default {
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showContactInfo: false
    };
  },
  methods: {
    deleteContact(id) {
      db.collection("contacts")
        .doc(id)
        .delete()
        .then(function() {
          console.log("Document successfully deleted!");
        })
        .catch(function(error) {
          console.error("Error removing document: ", error);
        });
    }
  }
};
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
.right {
  cursor: pointer;
  float: right;
}

.edit {
  color: black;
  margin-right: 1rem;
}

.delete {
  color: red;
}
</style>

{{contact.name}

电子邮件：{{contact.Email}
电话：{{contact.Phone}

从“../../firebase”导入{db}”；
导出默认值{
道具：{
联系人：{
类型：对象，
必填项：true
}
},
数据（）{
返回{
showContactInfo:false
};
},
方法：{
删除联系人（id）{
db.收集（“联系人”）
.doc（id）
1.删除（）
.然后（函数（）{
log（“文档已成功删除！”）；
})
.catch（函数（错误）{
console.error（“删除文档时出错：”，错误）；
});
}
}
};
.指针{
光标：指针；
}
.对{
光标：指针；
浮动：对；
}
.编辑{
颜色：黑色；
右边距：1rem；
}
.删除{
颜色：红色；
}

src/components/layout/Navbar.vue

<template>
  <div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-danger mb-3 py-0">
      <div class="container">
        <a href="/" class="navbar-brand">Contact Manager</a>
        <div>
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">
                <i class="fas fa-home" />
                Home
              </router-link>
            </li>
            <li class="nav-item">
              <router-link :to="{ path: '/contact/add', query: { type: 'add' } }" class="nav-link">
                <i class="fas fa-plus" />
                Add
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about" class="nav-link">
                <i class="fas fa-question" />
                About
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

家


添加


关于

src/views/ContactForm.vue

<template>
  <div>
    <div class="card mb-3">
      <div class="card-header">{{ editing ? 'Edit' : 'Add' }} Contact</div>
      <div class="card-body">
        <form @submit.prevent="addContact">
          <TextInputGroup
            label="Name"
            name="name"
            placeholder="Enter your name..."
            v-model="contact.name"
            for="name"
          />
          <TextInputGroup
            type="email"
            label="Email"
            name="email"
            placeholder="Enter your email..."
            v-model="contact.email"
          />
          <TextInputGroup
            type="phone"
            label="Phone"
            name="phone"
            placeholder="Enter your phone number..."
            v-model="contact.phone"
          />

          <input type="submit" value="Add Contact" class="btn btn-block btn-light" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import TextInputGroup from "../layout/TextInputGroup";
import { db } from "../../firebase";

var temp = Object.freeze({
      name: '',
      email: '',
      phone: '',
    });

export default {
  components: {
    TextInputGroup
  },
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    

    return {
      contact: Object.assign({}, temp),
      editing: false,
    };
  },
  methods: {
    addContact() {
      this.contact.createdAt = new Date();
      db.collection("contacts")
        .add(this.contact)
        .then(docRef => {
          console.log("Document written with ID: ", docRef.id);
        })
        .catch(error => {
          console.error("Error adding document: ", error);
        });
      this.$router.push("/");
    },
    getContactById() {
      db.collection("contacts")
        .doc(this.$route.params.id)
        .get()
        .then(snapshot => {
          if (!snapshot.exists) return;
          this.contact = snapshot.data();
        });
    },
    updateContact() {
      db.collection("contacts")
        .doc(this.$route.params.id)
        .update(this.contact)
        .then(() => {
          console.log("Updated document with ID: ");
        })
        .catch(function(error) {
          console.error("Error updating document: ", error);
        });
      this.$router.push("/");
    }
  },
  created() {
    if ("id" in this.$route.params) {
      this.getContactById();
      this.editing = true;
      console.log("id");
    } else {
      console.log("ups");
      // this
    }
  },
  watch: {
    type(val) {
      if (val == 'add') {
        this.contact = Object.assign({}, temp);
      }
    }
  }
};
</script>

<template>
  <ContactForm :type="formType" />
</template>

<script>
// @ is an alias to /src
import ContactForm from "@/components/contact/ContactForm.vue";

export default {
  name: "home",
  data() {
    return {
      formType: '',
    };
  },
  components: {
    ContactForm
  },
  watch: { 
   '$route.query.type': {
      handler: function(type) {
        this.formType = type;
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

//@是一个别名