Vue开发遇Uncaught ReferenceError: posts未定义问题求助

错误原因 #

1. 你混用了Vue 3的Options API（data/mounted等选项式写法）和Composition API（setup函数写法），setup函数执行时机早于created生命周期，此时Options API中定义的posts还未初始化，且setup作用域内无法直接访问Options API定义的变量，直接调用posts[30]必然报未定义错误。
2. posts是你通过异步接口请求获取的数据，哪怕初始化了posts，在接口返回前posts的值为undefined或空数组，直接取下标30也会触发报错。

解决方案 #

推荐统一用一种API写法即可，以下给出两种可直接运行的修改方案：

方案1：全用Options API（对新手更友好）

直接删除setup函数，将selected放到data中初始化，等接口拿到数据后再赋值：

<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
import axios from 'axios'

export default {
  data() {
    return {
      response: null,
      posts: [], // 初始设为空数组，避免模板中v-for报错
      selected: {} // 提前初始化selected
    };
  },
  components: {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
    CheckIcon,
    SelectorIcon,
  },
  mounted: function() {
    axios.get('http://localhost')
      .then(response => { 
        this.posts = response.data;
        // 拿到数据后再给selected赋值，加判断避免数组长度不足导致下标越界
        if (this.posts.length >= 31) {
          this.selected = this.posts[30]
        }
      });
  }
}
</script>

同时可以给模板中用到selected的属性加上可选链兜底，避免初始状态报错：

<img :src="selected?.flag" alt="" class="" />
<span class="">{{ selected?.name }}</span>

方案2：全用Composition API

将所有逻辑都放到setup函数中实现：

<script>
import { ref, onMounted } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
import axios from 'axios'

export default {
  components: {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
    CheckIcon,
    SelectorIcon,
  },
  setup() {
    const posts = ref([])
    const selected = ref({})

    onMounted(() => {
      axios.get('http://localhost')
        .then(response => { 
          posts.value = response.data
          if (posts.value.length >= 31) {
            selected.value = posts.value[30]
          }
        })
    })

    return {
      posts,
      selected
    }
  }
}
</script>

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