文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >打开这个vue视图(HTML)时，我将得到一个白色的空页面。

问打开这个vue视图(HTML)时，我将得到一个白色的空页面。
EN

Stack Overflow用户
提问于 2022-02-11 00:20:14
回答 2查看 62关注 0票数 0

我正在编写一个简单的ToDo列表。我有一个问题:当在浏览器中打开EditAssignee.vue时，我得到了一个空的白色页面。只显示我的标题。有人能告诉我问题在哪里吗？我的路由器出什么问题了吗？警告:我对这件事很陌生.谢谢!

EditAssignee.vue

代码语言：javascript
复制
<template>
  <div>
    <h1>Edit Assignee</h1>
<!--    <h2>{{ this.assignee.prename }} {{ this.assignee.name }}</h2>-->
<!--    <p>{{ this.assignee.email }}</p>-->
    <br>
    <input type="text" placeholder="Prename" v-model="prename"/> &nbsp;&nbsp;
    <input type="text" placeholder="Name" v-model="name"/> &nbsp;&nbsp;
    <input type="text" placeholder="E-Mail" v-model="email"/> &nbsp;&nbsp;
    <b-button size="sm" variant="primary" v-on:click="updateAssignee">Save Changes</b-button>
  </div>

</template>

<script>
import axios from "axios";
import config from "@/config";

export default {
  name: "EditAssignee",
  data() {
    return {
      assignee: null,
      id: this.$route.params.id,
      prename: this.$route.params.prename,
      email: this.$route.params.email,
      name: this.$route.params.name,
      assignees: []
    }
  },

  methods: {
    getAssignee: function () {
      axios.get(`${config.apiBaseUrl}/assignees/${this.$route.params.id}`).then((response) => {
        // log response data to the browser console
        console.log(response.data);
        // assign response to data variable
        this.assignee = response.data;
      });
    },
    updateAssignee: function () {
      axios.put(`${config.apiBaseUrl}/assignees/${this.$route.params.id}`, {
        prename: this.prename,
        name: this.name,
        email: this.email
      })
          .then(response => {
            this.fetchAllAssignees();

            console.log(response)
          })
          .catch(error => console.log(error))
    },

    created: function () {
      this.getAssignee()
    }
  }
}
</script>

<style scoped>

</style>

Assignee.vue (这是指向EditAssignee页面的按钮)

代码语言：javascript
复制
<template>
  <div>
    <h1>Assignees</h1>

    <p>Please fill in all fields to create a new assignee. Please note that the assignee needs an email with the domain
      <i>.uni-stuttgart.de.</i></p>
    <input type="text" placeholder="Prename" v-model="prename"/> &nbsp;&nbsp;
    <input type="text" placeholder="Name" v-model="name"/> &nbsp;&nbsp;
    <input type="text" placeholder="E-Mail" v-model="email"/> &nbsp;&nbsp;
    <b-button variant="primary" size="sm" v-on:click="createAssignee"
    >Create new Assignee
    </b-button>
    <br><br>

    <b-alert v-bind:show="assignees.length === 0" variant="warning">
      No assignee available on the server...
    </b-alert>


    <div class="assigneeBox" v-for="assignee in assignees" v-bind:key="assignee.id">
      <h3>{{ assignee.prename }} {{ assignee.name }}</h3>
      <p>E-Mail: {{ assignee.email }}, ID: {{ assignee.id }}</p>

      <div>
        <b-button
            size="sm"
            variant="outline-danger"
            v-on:click="deleteAssignee(assignee.id)"
        >
          <b-icon-trash></b-icon-trash>
          Delete
        </b-button>

        <b-button size="sm" variant="primary" :to="`/assignees/${assignee.id}`"><b-icon-pencil></b-icon-pencil>
          Details & Edit
        </b-button>

        <hr>
      </div>

    </div>
  </div>
</template>

<script>
// import configuration with API url; @ refers to the src directory
import config from "@/config";
// import library for HTTP requests
import axios from "axios";

export default {
  name: "Assignees",
  data() {
    return {
      assignees: [],
      prename: this.$route.params.prename,
      email: this.$route.params.email,
      name: this.$route.params.name,
      deleteMessage: ""
    };
  },
  methods: {
    // send GET request to API to fetch all assignees
    fetchAllAssignees: function () {
      axios.get(`${config.apiBaseUrl}/assignees`).then((response) => {
        // log response data to the browser console
        console.log(response.data);
        // assign response to data variable
        this.assignees = response.data;
      });
    },
    deleteAssignee: function (id) {
      // send DELETE request to API to delete a specific assignee by ID
      axios.delete(`${config.apiBaseUrl}/assignees/${id}`).then(() => {
        // update view by removing deleted assignee
        this.assignees = this.assignees.filter((assignee) => assignee.id !== id);
        // show success message using BootstrapVue toast component
        this.showToastMessage(
            "Alert",
            `Successfully deleted assignee with ID ${id}!`,
            "success"
        );
      });
    },
    createAssignee() {
      axios.post(`${config.apiBaseUrl}/assignees`, {prename: this.prename, name: this.name, email: this.email})
          .then(response => {
            this.fetchAllAssignees()
            this.showToastMessage(
                "Created",
                `${this.prename} ${this.name} has been created`,
                "success"
            );
            console.log(response)
          })
          .catch(error => console.log(error))
    },
    showToastMessage(title, msg, variant) {
      this.$bvToast.toast(msg, {
        title: title,
        variant: variant,
        solid: true,
        toaster: "b-toaster-top-center",
        autoHideDelay: 4000,
        appendToast: true
      });
    }
  },
  // executed after the component has been started
  created: function () {
    this.fetchAllAssignees();
  }
};
</script>

<style>
.assigneesBox {
  padding: 10px;
  margin: 3px;
  border: 1px solid #42b983;
  float: left;
  min-width: 250px;
  text-align: center;
}

.assigneesLogo {
  height: 200px;
}

.assigneeBox button {
  margin: 5px;
}
</style>

错误：

代码语言：javascript
复制
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'prename')"

found in

---> <EditAssignee> at src/views/EditAssignee.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
Vue._render @ vue.runtime.esm.js?2b0e:3571
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
Watcher @ vue.runtime.esm.js?2b0e:4484
mountComponent @ vue.runtime.esm.js?2b0e:4088
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
updateChildren @ vue.runtime.esm.js?2b0e:6260
patchVnode @ vue.runtime.esm.js?2b0e:6363
updateChildren @ vue.runtime.esm.js?2b0e:6237
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:3003
eval @ vue-router.esm.js?8c4f:3002
updateRoute @ vue-router.esm.js?8c4f:2414
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2402
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2384
eval @ vue-router.esm.js?8c4f:2162
iterator @ vue-router.esm.js?8c4f:2362
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2392
transitionTo @ vue-router.esm.js?8c4f:2260
push @ vue-router.esm.js?8c4f:2715
push @ vue-router.esm.js?8c4f:3037
handler @ vue-router.esm.js?8c4f:1139
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
28 weitere Frames anzeigen
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of null (reading 'prename')
    at Proxy.render (EditAssignee.vue?be9f:11:1)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
    at new Watcher (vue.runtime.esm.js?2b0e:4484:1)
    at mountComponent (vue.runtime.esm.js?2b0e:4088:1)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
    at init (vue.runtime.esm.js?2b0e:3137:1)
    at merged (vue.runtime.esm.js?2b0e:3322:1)
    at createComponent (vue.runtime.esm.js?2b0e:6022:1)
javascript
java
html
vue.js
EN

回答 2

Stack Overflow用户

发布于 2022-02-12 01:21:27

Assignee.vue

代码语言：javascript
复制
<script>
export default {
  name: "EditAssignee",
  data() {
    return {
      assignee: null,
      id: this.$route.params.id,
      assignees: [],
      prename:undefined //Add this.
    }
  },
}
</script>
票数 0
EN

Stack Overflow用户

发布于 2022-02-14 01:27:23

错误日志意味着您正在尝试读取空对象的属性。受让人是从网络中获得的。在网络请求发生之前，Vue将开始读取属性。在这种情况下，受让人仍然是空的。因此，在访问可能为空的对象之前，请检查该对象是否为空。此外，{{}也不需要这样做。

代码语言：javascript
复制
<h2>{{ assignee?`${assignee.prename} ${assignee.name}`:'' }}</h2>
<p>{{ assignee?assignee.email:'' }}</p>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71073909

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档