vue.js将新用户添加到json文件内的用户数组

0qx6xfy6  于 2022-12-30  发布在  Vue.js
关注(0)|答案(2)|浏览(143)

我是vue.js的新手，我无法将新用户添加到用户数组中。当我在提交时调用函数时，我使用console.log记录"this. user"，但我没有得到另一个包含新用户的框，也没有在用户数组中找到新用户。
我确实收到一条错误消息，内容如下：

vue.runtime.esm.js?c320:3049 Error: Cannot find module './undefined'
    at webpackContextResolve (app.js:250:11)
    at webpackContext (app.js:245:11)
    at eval (Box.vue?c311:19:1)
    at Proxy.renderList (vue.runtime.esm.js?c320:2031:1)
    at Proxy.render (Box.vue?c311:7:1)
    at Vue._render (vue.runtime.esm.js?c320:2684:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?c320:3875:1)
    at Watcher.get (vue.runtime.esm.js?c320:3446:1)
    at Watcher.run (vue.runtime.esm.js?c320:3522:1)
    at flushSchedulerQueue (vue.runtime.esm.js?c320:4121:1)

_________________________________
<template>
  <div>
    <div class="parent">
      <div v-for="user in users" :key="user.id" class="content-box use-box">
        <div class="content">
          <!-- <div class="Section1"> -->
          <div class="img-section">
            <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
            <img
              alt="profile image"
               v-bind:src="
                require(`@/assets/${user.img}`) || '../assets/monica smith.jpg'
              "
            />
            <small>{{ user.role }}</small>
          </div>
          <div class="info">
            <div class="top">
              <h1>Janet Carton</h1>
              <div class="location-box">
                <img
                  class="location"
                  alt="location"
                  src="../assets/location.png"
                />
                <p>{{ user.liveLocation }}</p>
              </div>
            </div>
            <div class="bottom">
              <h2>Twitter, Inc.</h2>
              <p>{{ user.address1 }}</p>
              <p>{{ user.address2 }}</p>
              <p>{{ user.phone }}</p>
            </div>
          </div>
        </div>
        <div class="footer">
          <img
            class="footer-img clickable"
            alt="edit"
            src="../assets/edit.png"
          />
          <img
            class="footer-img clickable"
            alt="delete"
            src="../assets/trash.png"
          />
        </div>
      </div>
      <div v-if="showAdd" class="content-box">
        <form @submit.prevent="addUser">
          <div class="form">
            <img
              class="new-img"
              alt="new img"
              src="../assets/janeth carton.jpg"
            />
            <div class="form-container">
              <input
                v-model="user.name"
                type="text"
                placeholder="Full Name..."
              />
              <input v-model="user.role" type="text" placeholder="Role..." />
              <input
                v-model="user.address1"
                type="text"
                placeholder="Address..."
              />
              <input
                v-model="user.address2"
                type="text"
                placeholder="Locality & Postalcode..."
              />
              <input
                v-model="user.phone"
                name="phoneError"
                v-validate="'regex:^[0-9\()\+\/]+$'"
                type="text"
                placeholder="Phone..."
              />
              {{ user }}
            </div>
          </div>
          <div class="check footer">
            <p class="error">{{ errors.first("phoneError") }}</p>
            <button type="submit">Submit</button>
            <!-- <img
              v-on:click="addUser"
              class="footer-img clickable"
              alt="confirm"
              src="../assets/check.png"
            /> -->
          </div>
        </form>
      </div>

      <div class="add-container">
        <img
          type="submit"
          class="add clickable"
          alt="add"
          src="../assets/add.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
// const images = require.context("@/assets/img/covers", false, /\.png$|\.jpg$/);
import userData from "../users.json";
export default {
  name: "UsersBox",
  data() {
    return {
      users: userData,
      showAdd: true,
      user: {
        id: null,
        img: "john-smith.jpg",
        name: "",
        role: "",
        liveLocation: "",
        address1: "",
        address2: "",
        phone: "",
      },
    };
  },
  methods: {
    addUser() {
      this.users.push({ user: this.user });
      console.log("user added");
      console.log(this.user);
      // this last line is to clear the text after submit
      this.user = {
        id: null,
        img: "",
        name: "",
        role: "",
        liveLocation: "",
        address1: "",
        address2: "",
        phone: "",
      };
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin-bottom: 0.3rem;
}
h1 {
  margin-top: 0;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}
h2 {
  margin-bottom: 0.1rem;
  font-size: 0.8rem;
}
p {
  margin: 0;
  padding: 0;
}
input {
  padding: 0.15rem 0.15rem 0.15rem 0.5rem;
  margin: 0.3rem;
  border: none;
  border-radius: 2px;
  height: 1.03rem;
  width: 90%;
  max-width: 25rem;
  box-shadow: 1px 1px 4px 2px #80808047;
}
form {
  width: 90%;
}
.add {
  width: 5rem;
  height: 5rem;
}
.add-container {
  align-items: center;
  display: flex;
  justify-content: center;
}
.img-section {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  align-items: center;
}
.location-box {
  align-items: center;
  display: flex;
}
.location {
  margin: 0;
  margin-right: 0.1rem;
  width: 0.6rem;
  height: 0.6rem;
}
.footer {
  display: flex;
  width: 98%;
  justify-content: flex-end;
}
.footer-img {
  width: 1rem;
  padding: 0.3rem;
  height: 1rem;
}
.check {
  width: 100%;
  margin-left: 9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.error {
  color: red;
  font-size: 10px;
  margin-left: 10%;
}
.content {
  width: 99%;
  height: 90%;
  display: flex;
  justify-content: initial;
  align-items: center;
}
.content-box {
  flex-direction: column;
  border-radius: 1%;
  min-width: 40%;
  height: 12rem;
  background-color: #ffffffe3;
  align-items: flex-start;
  display: flex;
  text-align: initial;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666363;
}
.use-box {
  padding-left: 8%;
}
.info {
  margin-left: 10%;
}
.parent {
  margin-right: 1rem;
  margin-left: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2rem;
  justify-content: space-between;
}
.clickable:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.clickable:active {
  transform: scale(0.95);
}
.form {
  display: flex;
  justify-content: initial;

  padding-top: 1rem;
  padding-left: 1rem;
  width: 100%;
}
.form-container {
  padding-left: 0.1rem;
  margin-left: 5%;
  justify-content: space-between;
  display: flex;
  height: 90%;
  width: 100%;
  min-width: 10rem;
  flex-direction: column;
}
.new-img {
  width: 5rem;
  height: 5rem;
}

@media only screen and (max-width: 1000px) {
  .parent {
    display: grid;
    grid-template-columns: 1fr;
  }
}
</style>

userData是一个json文件：

[
  {
    "id": 1,
    "img": "john-smith.jpg",
    "name": "John Smith",
    "role": "Graphics designer",
    "liveLocation": "Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 2,
    "img": "alex jonathan.jpg",
    "name": "Alex Johnatan",
    "role": "CEO",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 3,
    "img": "monica smith.jpg",
    "name": "Monica Smith",
    "role": "Marketing manager",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 4,
    "img": "michael zimber.jpg",
    "name": "Michael Zimber",
    "role": "Sales manager",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 5,
    "img": "sandra smith.jpg",
    "name": "Sandra Smith",
    "role": "Graphics designer",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 6,
    "img": "janeth carton.jpg",
    "name": "Janet Carton",
    "role": "Graphics designer",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 7,
    "img": "alex jonathan.jpg",
    "name": "Alex Johnatan",
    "role": "CEO",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  },
  {
    "id": 8,
    "img": "john-smith.jpg",
    "name": "John Smith",
    "role": "Graphics designer",
    "liveLocation": " Riviera State 32/106",
    "address1": "795 Folsom Ave, Suite 600",
    "address2": "San Francisco, CA 94107",
    "phone": "P: (123) 456-7890"
  }
]

有人知道我该怎么解决吗

vue.js

2条答案

按热度按时间
vfh0ocws

vfh0ocws1#

通过执行this.users.push({ user: this.user })，你实际上是在推送一个以'user'为键、'this.user'为值的对象：

改做this.users.push(this.user)！

赞(0）分享  回复(0）举报  2022-12-30
wooyq4lh

wooyq4lh2#

尝试在装载或创建时从userData进行深度克隆，而不是在"数据"中引用。
就像这样：

data() {
    return {
      users: []
 }
}
mounted() {
  this.users = structuredClone(userData)
}

如果成功了告诉我。

赞(0）分享  回复(0）举报  2022-12-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com