Subscribe on changes!

for statement in inline handler

avatar
Nov 29th 2022
<script setup>
import { reactive } from 'vue'

const state = reactive({
  list: [1, 2, 3]
})

const {log} = console
</script>

<template>
  <h1>{{ msg }}</h1>
  <button @click="() => {
         for (const x of state.list) {
                  log(x) // output: undefined
        }         
  }">Click</button>
</template>

workaround:

  <button @click="() => {
         let x
         for (x of state.list) {
                  log(x) //output: 1, 2, 3
        }         
  }">Click</button>

SFC Playground

Originally posted by @JetLua in https://github.com/vuejs/core/discussions/7237