Method's first letter gets dropped, produces "Property _________ does not exist on type 'CombinedVueInstance'"



  • I am very confused by this. My app is working just fine as a web app, but I’m getting three Vetur errors that I can’t make head or tail out of.

    Property 'tartPlay' does not exist on type 'CombinedVueInstance<{ feed: any; showDescription: any; showImage: any; oldElement: number; newElement: number; elapsedTime: number; state: string; timeupdate: number; listener: { listener_id: number; listener_name: string; date_last_logon: string; }; episode: {}[]; value: number; } & { ...; } & { ...; } & Record<......'. Did you mean 'startPlay'?
    
    Property 'laying' does not exist on type 'CombinedVueInstance<{ feed: any; showDescription: any; showImage: any; oldElement: number; newElement: number; elapsedTime: number; state: string; timeupdate: number; listener: { listener_id: number; listener_name: string; date_last_logon: string; }; episode: {}[]; value: number; } & { ...; } & { ...; } & Record<......'. Did you mean 'playing'?
    
    Property 'aused' does not exist on type 'CombinedVueInstance<{ feed: any; showDescription: any; showImage: any; oldElement: number; newElement: number; elapsedTime: number; state: string; timeupdate: number; listener: { listener_id: number; listener_name: string; date_last_logon: string; }; episode: {}[]; value: number; } & { ...; } & { ...; } & Record<......'. Did you mean 'paused'?
    

    Here’s the code:

    <template>
      <q-page class="flex-center">
        <div class="padDiv">
          <img style="width: 100px; float: left; margin-right: 20px;" :src="this.showImage">
          <h5>LOA Today</h5>
          <p>{{ this.showDescription }}</p>
        </div>
        <div style="clear: both;"></div>
        <div style="margin-top: 18px;">
          <hr>
        </div>
        <div class="padDiv">
          <div v-for="item in feed" :key="item.element">
            <h6
              @click="startPlay(item.element)"
              class="pointer"
              >{{  item.title }}</h6>
            <p><span style="color: white;">{{ item.date }} &ndash; </span> {{ item.description }} <span style="color: green;">Show #{{ item.episodeNumber }}</span></p>
            <player
              :mp3="item.mp3"
              ref="pauseMe"
              @timeupdate="currentTime($event, item.element)"
              @playing="playing(item, item.element)"
              @paused="paused(item, item.element)"
            ></player>
            <net-status ref="netStatus" :listener="listener" :episode="episode" />
            <hr>
          </div>
        </div>
      </q-page>
    </template>
    

    I did find three pages via Google referring to this error when using Typescript. The problem with this in my case is that I am not using Typescript.

    Why am I getting these three errors?



  • I had a very similar issue, the property for which this happens, please try to accommodate the entire tag into one line and see if it works, this is weird but works for me every time. Let me know if that works.



  • I found out what is going on with this. It appears to be an issue with Visual Studio Code using CRLF vs just LF. It can be repaired by opening Visual Studio Code, pressing ctrl-shift-P in Windows (crtl-cmd-P on Macs) and typing Change End Of Line Sequence into the field. Click on it when it appears, and you’ll get two options: LF and CRLF. Choose LF. That should take care of it.



  • Where did you find your resolution? For me it’s only happening in one component vue file.

    I tried changing to LF as you suggested but I’m still seeing the Vetur errors.



  • @jrhopkins83 To be honest, I don’t remember. I was reading anything I could find that was even slightly similar, and I stumbled across that particular setting. When I changed it (with the offending component open in Visual Studio Code), the problem went away.



  • I recently ran into this issue, or at least one that resembles it. After some exploration I discovered another dev had introduced a .vscode/settings.json file that contained the following entry:

    "vetur.experimental.templateInterpolationService": true
    

    Removing this line resolved things for me.

    BTW My approach was to compare a project that worked and one that didn’t. Since my project was not Typescript based and I was using the same Vue version in both project, this left any possible settings that we VS Code and project specific.

    I am currently using Vetur 0.28.0, with Visual Studio Code 1.50.0, on macOS 10.15.6.



  • @ajmas You’re right. The issue returned for me, but I tried what you suggested with a variation. I just changed that value to false instead of deleting it, and I got the same result as you did. Thanks!


Log in to reply