question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Maybe @Prop don't support ES file.

See original GitHub issue

This is the example code.

<!-- Component: vSidebar.vue -->
<template>
  <aside class="vSidebar">
    {{test}}
  </aside>
</template>

<script>
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
class vSidebar extends Vue {
  @Prop()
  test;

  mounted() {
    console.log(this)
  }
}

export default vSidebar;
</script>
<!-- Parent: App.vue -->
<template>
  <div class="App">
    <template v-if="user">
      <v-header />
      <v-sidebar :test="test" />
    </template>
  </div>
</template>

<script>
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
class App extends Vue {
  test = '123'

  get user() {
    return this.$store.state.user.loginUser;
  }

  @Watch('user')
  onUserChange() {
    if(this.user) {
      this.$router.push('dashboard');
    } else {
      this.$router.push('signin');
    }
  }
}

export default App;
</script>

I’m sure @Watch is working, but @Prop not. I got vue.esm.js:571 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. and this.test in vSidebar is undefined when mounted hook emitted. If I use @Component({props}), it works.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kaorun343commented, Nov 24, 2017

Hi, everyone.

I apologize you for late reply.

I also mentioned this problem and what I found is that when target (TypeScript’s target) is ES2015 it works well, but when ES5, it doesn’t.

0reactions
kaorun343commented, Dec 12, 2018

@Emiya0306

Hi.

https://github.com/Microsoft/TypeScript/pull/20075

Here’s the reason why the exclamation mark is needed. The feature is introduced since TS 2.7.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I set /system to read-write? - XDA Forums
Member · 1. Set /system to read-write · 2. open the file /system/bin/clrbootcount.sh in text editor · 3. Add the following line at...
Read more >
Samba account has no permission in ES File Explorer
ES File Explorer fully supports SFTP. You can configure it by choosing "FTP" under Network menu, then selecting "New" followed by SFTP.
Read more >
How to Recover Files Deleted by ES File Explorer in Android?
Here, to recover deleted photos by the file manager, we suggest choosing Deep Scan since it supports all file types including contacts, messages ......
Read more >
How to install root access in ES File Explorer - Quora
Only possible on a rooted phone of course. Just open ES File Explorer then go to Tools from the 3 bars top left...
Read more >
How to Use ES File Explorer Effectively - Tech Junkie
For Windows, it's File Explorer, and for Android, things are more complicated. Unfortunately, many Android devices don't have a built-in file ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found