时间戳

首页 > 解决方案 > 如何管理 Vue 反应性？

javascript - 如何管理 Vue 反应性？

问题描述

从数据库获取数据后，我需要更新组件。但我收到一条错误消息。我已经尝试过 v-if 和 v-show 并且得到了相同的结果。

我要更新的组件是模态的

<div>
  <b-modal id="modal-xl"
           ok-title="next"
           :size="modalSize"
           @ok.prevent="launchContentModal"
           @cancel="resetPostModal"
           hide-header-close
           no-close-on-backdrop>
              <add-post :postTitle="postTitle" 
                        :postTopic="postTopic" 
                        :postType="postType">
              </add-post>
              <add-content v-show="post.id" 
                           :postType="postType">
              </add-content>
              <ArticlesEditor v-show=" post.id && post.postType.id"> 
              </ArticlesEditor>
    </b-modal>
</div>

和数据对象是：

        data(){
            return {
                postTitle:'',
                topic:'',
                postTopic:[],
                postType: {title: 'video',id:1},
                user:{},
                post:{
                    id:'',
                    postTopic:[],
                    postType:{
                        title:'',
                        id:'',
                    },
                },

            }

请求方法是：

launchContentModal(){
    if(!this.postTitle) this.$root.$emit('noTitleProvided');
    else if(!this.postTopic[0]) this.$root.$emit('noTopicProvided');
    else {
      this.post = { title: this.postTitle, topics:this.postTopic, type: this.postType};
      ResourceCenter.save(this.department, this.user, this.post)
      .catch(({response}) =>alert(response.data))
      .then(({data}) => {
           this.post = data;
       });
    }
},

发送保存请求后，我得到了正确的响应，这是响应对象：

{"title":"sdf","client_id":"12","department_id":"327","type":"ebook","type_id":2,"user_id":668,"updated_at":"2019-05-08 09:15:44","created_at":"2019-05-08 09:15:44","id":59} ```

并在正确获取响应更新后发布对象：

post:{"title":"sdf","client_id":"12","department_id":"327","type":"ebook","type_id":2,"user_id":668,"updated_at":"2019-05-08 09:15:44","created_at":"2019-05-08 09:15:44","id":59}

预期结果：应该更新模态并显示添加内容组件。

错误消息是：[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'id'”

我希望解释清楚

标签： javascriptvue.js

解决方案

您的回复中没有post.postType，但您正在post.postType.id从模板访问：

<ArticlesEditor v-show=" post.id && post.postType.id">

在这里，post.postType = undefined&试图访问post.postType.id，错误：

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'id'”

推荐阅读