Vue+TypeScript：Options API转Composition API时的this类型标注与计算属性实现问题求助

Hey there! Let's work through your two issues step by step to get your Vue 3 Composition API + TypeScript code running perfectly.

Issue 1: "'this' implicitly has type 'any'" Error #

First off, let's clarify a key point about the Composition API: you don't need to use this at all in the setup function. Unlike the Options API where this refers to the component instance, in Composition API we directly use the reactive variables we create with ref/reactive.

Looking at your code, your showDropdown and setActiveItem methods don't actually use this—so that error might be a false positive from TypeScript, or maybe you accidentally had this references earlier that you removed? Either way, the fix is simple:

• Don't add this: any to your methods (that's a workaround, not a proper solution).
• Ensure none of your setup functions rely on this—always access your reactive variables directly (like show.value or activeItem.value).

If you're still seeing the error, double-check your tsconfig.json settings. Make sure noImplicitThis is enabled (which it should be for strict TypeScript), but since you're not using this, this rule won't trigger once your code is clean of this references.

Issue 2: Computed Property dropdownItems Not Working #

Your computed property logic is actually correct—it mirrors the Options API version exactly. The most likely reasons it's not working are:

1. Missing imports: You forgot to import computed (and ref) from Vue. Without importing these, the computed property won't be reactive.
2. Incorrect template usage: Make sure you're using dropdownItems directly in your template (no .value needed—Vue automatically unwraps refs in templates).

Let's fix this by adding proper imports and optional type annotations for clarity:

Corrected Full Code #

<script setup lang="ts">
import { ref, computed } from 'vue';

const items = ref<string[]>(['Car', 'Truck', 'Bike', 'Caravan']);
const activeItem = ref<number>(0);
const show = ref<boolean>(false);

function showDropdown() {
  show.value = !show.value;
}

function setActiveItem(item: string) {
  const index = items.value.indexOf(item);
  // Optional: Add a check to avoid setting invalid indexes
  if (index !== -1) {
    activeItem.value = index;
    show.value = false;
  }
}

const dropdownItems = computed<string[]>(() => {
  return items.value.filter((_, i) => i !== activeItem.value);
});
</script>

Note: I added optional type annotations to the refs and computed property—this isn't strictly necessary (TypeScript infers the types automatically), but it makes your code more explicit and easier to maintain.

Additional Template Check #

Make sure your template uses dropdownItems correctly, like this:

<template>
  <button @click="showDropdown">Toggle Dropdown</button>
  <div v-if="show" class="dropdown">
    <div 
      v-for="item in dropdownItems" 
      :key="item" 
      @click="setActiveItem(item)"
    >
      {{ item }}
    </div>
  </div>
  <p>Active Item: {{ items[activeItem] }}</p>
</template>

内容的提问来源于stack exchange，提问作者Kudos