时间戳

首页 > 解决方案 > Vue js数据未显示在模板上

vue.js - Vue js数据未显示在模板上

问题描述

我很难理解为什么我不能显示data.

从下面的代码中，{{userId}}不{{test}}打印，但其他所有内容都会打印。例如文本User with id、test:和Public profile of user的内容{{$route.params.used_id}}。

为什么会这样，我需要做些什么来解决这个问题？

<template>
  <div>
    <h1>User with id {{userId}}</h1>
    <h1>test: {{test}}</h1>
    <h1>{{user_id}}</h1>
    <p>Public profile of user</p>
    <p>{{$route.params.user_id}}</p>
  </div>
</template>

<script>
export default {
  props: ["user_id"],
  data: function() {
    return {
        //id is name of the dynamic segment we created in router
      userId: this.$route.params.user_id,
      test: "test"
    };
  }
};
</script>

<style lang="scss">
</style>

来自控制台的错误：

[Vue warn]: Property or method "userId" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

标签： vue.jsvuejs2

解决方案

尝试像这样更改您的数据属性

data () {
    return {
        //id is name of the dynamic segment we created in router
      userId: this.$route.params.user_id,
      test: "test"
    }
  }

当你在this里面使用data

推荐阅读