Question

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

我要更新的componenet是modal

<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'”

我希望解释清楚

Answer 1

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

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

在这里post.postType = undefined并尝试访问post.postType.id，因此出现错误：

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

如何管理vue反应性？

1 个答案: