vetur: Property 'xxx' does not exist on type 'CombinedVueInstance & Vue, object, object, object, Record>'

I found in .vscode folder a file settings.json

{ “vetur.validation.template”: false,

“eslint.validate”: [“javascript”, “javascriptreact”, “typescript”, “vue”],

“vetur.experimental.templateInterpolationService”: true (change this to false. It worked for me) }

search for vetur.validation.interpolation

I’ve downgraded to the 0.26.0 version and it works.

this worked for me

set vetur.validation.interpolation false in latest version.

Unfortunately, for me, I can’t send along the project that is having this issue. I am trying to recreate it in a small, sample application, but the error is not showing. This error is showing for some props, some computed items and some methods. Not all, which is making it hard to track down. I would suggest, if you have several Vue apps, as I’m sure you do, open each one and see if the error appears.

A sample of the error:

The item it claims does not exist, clearly does:

BTW, this is in a Javascript application - NO Typescript is being used.

Well, for me, temporary solution is to downgrade to the previous version until this is fixed.

I’ve downgraded to the 0.26.0 version and it works.

I added vetur.validation.interpolation. Default to true.

Other issues are all upstream and there’s nothing I can do from Vetur side. Either TS need to fix circularity or you need to type computed property manually.

Well, for me, temporary solution is to downgrade to the previous version until this is fixed.

You can’t downgrade to fix it. The only possible way is to install TypeScript 2.9 in project, And set "vetur.useWorkspaceDependencies": true

Same here. Big problem…

Setting return types for all functions inside computed solved it for me.

Here is a reproducible component. If you change the computed to return a string, the error will go away. As it is, it shows these errors:

<template>
<div class='hello'>
  {{ title }} {{ testing }}
    <div v-for="item in items">{{ item }}</div>
    <button @click="clickMe">Click me</button>
</div>
</template>

<script>

export default {

  props: {
    testing: { type: String }
  },
  computed: {
    title() {      
      return this.testing === 'hello'; // ** change to just return a string to remove error
    }
  },
  methods: {
    clickMe() {
      console.log('click');
    }
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5']
    };
  }
};
</script>

Adding type annotations (assuming I’m doing it correct) does not help:

I’ve downgraded too to the 0.26.0 version.

If this work in v0.26.0?

Yes, it is working on v0.26.0.

I’ve downgraded too to the 0.26.0 version.

same, this worked for me

I think the solution is to have a config that controls templateInterpolationDiagnostics.

For completion/definition/reference/hover, people should still be able to use them without having to fully type their components.

I think it’s time we move interpolation service out of experimental status and fix all remaining issues.

How about adding vetur.validation.interpolation, defaulted to false? Completion/definition/reference/hover powered by template interpolation service can be turned on by default.

Here is a reproducible component. If you change the computed to return a string, the error will go away. As it is, it shows these errors:

<template>
<div class='hello'>
  {{ title }} {{ testing }}
    <div v-for="item in items">{{ item }}</div>
    <button @click="clickMe">Click me</button>
</div>
</template>

<script>

export default {

  props: {
    testing: { type: String }
  },
  computed: {
    title() {      
      return this.testing === 'hello'; // ** change to just return a string to remove error
    }
  },
  methods: {
    clickMe() {
      console.log('click');
    }
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5'],

      items2: []
    };
  }
};
</script>

This problem is #1707 and vuejs/vue#8721 It’s a upstream problem and The v0.26.0 version also have error. The v0.26.1 version is only change for can use template interpolation service when vetur.validation.template: false. If you no need template interpolation service, please set vetur.experimental.templateInterpolationService: false

For anyone encountering this issue. I have seen it creep up a few times when using typescript. I’m not sure if it’s an issue with vue-tsc or something else, but this is the solution to get around the linter warnings/errors.

Normally the issue would look something like this…

TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

The solution is to define some types so that Vue is aware of what is being defined in the component and those corresponding return types. The issue happens when for some reason Vue can’t figure it out automatically and needs some help.

Example:

interface IData {
  title: string;
}
interface IProps {

}
interface IComputed {

}
interface IMethods {
 
}

Define the component

export default Vue.extend<IData, IMethods, IComputed, IProps>({
   data() {
      title: "Some title"
   }
});

Please also note that the order in which you pass your type parameters is important. The order follows DMCP (Data, Methods, Computed, Props).

Hope this helps. If anyone has any other specific questions, please email me. My email is on my Github profile.

I get below error: Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

And also doThisClickgave same error.

Solution: i have added declaration to component.

<script lang="ts">
  import Vue from 'vue';

  // Add below code sample to your component
  declare module 'vue/types/vue' {
    interface Vue {
      fields: Field[];
      doThisClick: () => void;
      doThisInput: () => void;
    }
  }

  export default Vue.extend({
    name: 'form-builder',
    data() {
      return {
        fields: [
          {
            name: 'name',
            events: { click: this.doThisClick, input: this.doThisInput },
          },
        ],
      };
    },
    methods: {
      doThisClick(field: Field): void {
        console.log('click', field, event);
      },
      doThisInput(field: Field): void {
        console.log('Input', field, event);
      },
    },
  });
</script>

Vetur still works well while using class-style components. Because of a smoother transition to Vue 3, we wanted to migrate to options/composition API and having the above mentioned issues.

Interestingly - computed is fine, but adding components: { AppSidebar, AppFooter }, leads to the same error.

I downgraded too. Only solution I could find. It seemed to want types in javascript and I can’t change 1000’s of lines of code just for this.

@jtsom Is this code work in v0.26.0?

Yup. No errors with v0.26.0:

Template interpolation service https://vuejs.github.io/vetur/interpolation.html#generic-language-features

Hm. Ok. I do remember reading that article and I did turn that option on. Up until v0.26.1 I had no issues. Having that option on using v0.26.1, results in the reported errors. Turning it off remove the errors. So something in 0.26.1 triggered the problem.