Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event "@update:" syntax causes TS error in 1.6.2 #3100

Closed
mattmink opened this issue May 1, 2023 · 2 comments
Closed

Event "@update:" syntax causes TS error in 1.6.2 #3100

mattmink opened this issue May 1, 2023 · 2 comments
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@mattmink
Copy link

mattmink commented May 1, 2023

When a parent listens to an event on a child using the update:EVENT_NAME syntax, TS errors are reported in VSCode:

  • Cannot find name 'PROP_NAME'. ts(2304)
  • Unused label. ts(7028)

Screenshot 2023-05-01 at 1 43 48 PM

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import ModalDialog from './components/ModalDialog.vue'

const isModalOpen1 = ref(false)
const isModalOpen2 = ref(false)
</script>

<template>
  <div>
    <div>
      <button @click="isModalOpen1 = true">Show Dialog 1 (<code>close</code> event)</button>
      <ModalDialog :show="isModalOpen1" :large="true" @close="isModalOpen1 = false">
        This dialog uses the <code>close</code> event to close
      </ModalDialog>
    </div>

    <div>
      <button @click="isModalOpen2 = true">Show Dialog 2 (<code>update:show</code> event)</button>
      <!-- errors are on 'show' and 'large' props here -->
      <ModalDialog :show="isModalOpen2" :large="true" @update:show="isModalOpen2 = $event">
        This dialog uses the <code>update:show</code> event to close
      </ModalDialog>
    </div>
  </div>
</template>

ModalDialog.vue

<template>
  <div class="modal" :class="{ 'modal-large': large }" v-show="show">
    <div>
      <slot />
    </div>
    <div>
      <button type="button" @click="$emit('close')">close</button>
      <button type="button" @click="$emit('update:show', false)">update:show</button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits(['close', 'update:show'])

defineProps({
  show: {
    type: Boolean,
    default: false
  },
  large: {
    type: Boolean,
    default: false
  }
})
</script>

Workaround
Revert to version 1.6.1 of Vue Language Features (Volar).

Vue Language Features (Volar) Version: v1.6.2
TypeScript Vue Plugin (Volar) Version: v1.6.2

VS Code Details
Version: 1.77.3 (Universal)
Commit: 704ed70d4fd1c6bd6342c436f1ede30d1cff4710
Date: 2023-04-12T09:19:37.325Z
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: Yes

@MajesticPotatoe
Copy link

Can confirm same results ts(2304) when using any event with a : in it (@update:model-value being the most common use case)

@johnsoncodehk johnsoncodehk added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first labels May 1, 2023
@johnsoncodehk
Copy link
Member

Fixed by 659331c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

No branches or pull requests

3 participants