新手求助 vue2 文本{{}}内使用JavaScript表达式报错

问题描述

问 题

这是组件的代码

<template>
    <div>
      <div class="cheader">
        <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true" title="个人信息"></x-header>
      </div>
      <div id="userpage">
          <img :src="userpage.avatar_url"  class="userlogo">
          <p></p>
          <p>创建时间：{{ userpage.create_at.slice(0,10) }}&nbsp积分:{{userpage.score}}</p>
      </div>
      <div class="choosetopic">
          <p @click="getlist1">最近发帖</p>
          <p @click="getlist2">最近回复</p>
      </div>
      <div>
          <ul>
              <li v-for="item in replylist">
                  <div class="recentlist">
                      <router-link :to="{name:'Userpage',params:{loginname:item.author.loginname}}"><img :src="item.author.avatar_url"></router-link>
                      <div class="recent25">
                          <p>{{item.title}}</p>
                          <p class="recentlist2"><span>{{item.author.loginname}}</span><span>{{ item.last_reply_at.slice(0,10) }}</span></p>
                      </div>
                  </div>
                  <div class="grey"></div>
              </li>
          </ul>
      </div>
    </div>  
</template>

<script>
import { XHeader, Actionsheet, TransferDom } from 'vux'
import axios from 'axios'
export default{
    data() {
        return {
            userpage: {},
            replylist: [],
        }
    },
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Actionsheet
  },
    methods:{
        getuserpage() {
            let url = `https://cnodejs.org/api/v1${this.$route.path}`
            axios.get(url).
            then( res => {
                this.userpage = res.data.data
                this.replylist = this.userpage.recent_topics
            })
          .catch(function(err){
              console.log(err)
          })
            //console.log(this.replylist)
        },
        getlist1() {
            this.replylist = this.userpage.recent_topics

        },
        getlist2() {
            this.replylist = this.userpage.recent_replies
        }
    },
    created(){
        this.getuserpage()
    },
    watch:{
        '$route' : 'getuserpage',
    }
}    
</script>

<style>
</style>

内容可以正常显示 但是会报错

新手不知道哪里的问题

解决方案

data初始化的时候把view中可能会用到的结构补全，赋给默认值，代码如下：

data() {
    return {
        userpage: {
            avatar_url: "",
            create_at: "",
            score: 0
        },
        replylist: [],
    }
},

这篇关于新手求助 vue2 文本{{}}内使用JavaScript表达式报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！