无法在 Vue 中定义变量

Question

我刚刚开始使用 VueJS 和 Tailwind，之前从未真正使用过任何与 npm 相关的东西。

我有以下代码，使用 Tailwind 和 Headless UI，通过调试，我知道我已经完成了 99% 的工作......除了持续的错误消息

未捕获的引用错误：未定义帖子

我知道这应该是直截了当的，但是我在这里或通过 Google 找到的所有内容都不起作用。我哪里错了？

<template>
  <Listbox as="div" v-model="selected">
    <ListboxLabel class="">
      Country
    </ListboxLabel>
    <div class="mt-1 relative">
      <ListboxButton class="">
        <span class="">
          <img :src="selected.flag" alt="" class="" />
          <span class="">{{ selected.name }}</span>
        </span>
        <span class="">
          <SelectorIcon class="" aria-hidden="true" />
        </span>
      </ListboxButton>

      <transition leave-active-class="" leave-from-class="opacity-100" leave-to-class="opacity-0">
        <ListboxOptions class="">
          <ListboxOption as="template" v-for="country in posts" :key="country" :value="country" v-slot="{ active, selected }">
            <li :class="">
              <div class="">
                <img :src="country.flag" alt="" class="" />
                <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
                  {{ country.latin }}
                </span>
              </div>

              <span v-if="selected" :class="">
                <CheckIcon class="" aria-hidden="true" />
              </span>
            </li>
          </ListboxOption>
        </ListboxOptions>
      </transition>
    </div>
  </Listbox>
</template>

<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: undefined,
      };
  },
  components: {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
    CheckIcon,
    SelectorIcon,
  },
  mounted: function() {
    axios.get('http://localhost')
      .then(response => { 
        this.posts = response.data;
      });
  },
  setup() {
    const selected = ref(posts[30])

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

违规行是const selected = ref(posts[30])，我知道我需要以某种方式定义posts，但我不明白怎么做？

Answer 1

您的错误原因：

您正在尝试在填充数组之前访问数组元素。因此出现undefined 错误。

解释

您正在使用composition api 和options api 的组合。坚持一个。

我正在写这个答案，假设你会选择composition api。

关注下面sn-p中的cmets；

<script>
// IMPORT ONMOUNTED HOOK
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 {
    // YOU DO NOT NEED TO DEFINE THE DATA PROPERTY WHEN USING COMPOSITION API
    /*data() {
      return {
        response: null,
        posts: undefined,
      };
  },*/
  components: {
    Listbox,
    ListboxButton,
    ListboxLabel,
    ListboxOption,
    ListboxOptions,
    CheckIcon,
    SelectorIcon,
  },
  // YOU DO NOT NEED THESE LIFE CYCLE HOOKS; COMPOSITION API PROVIDES ITS OWN LIFECYCLE HOOKS
  /*mounted: function() {
    axios.get('http://localhost')
      .then(response => { 
        this.posts = response.data;
      });
  },*/
  setup() {
    // YOU ARE TRYING TO ACCESS AN ELEMENT BEFORE THE ARRAY IS POPULATED; THUS THE ERROR
    //const selected = ref(posts[30])
    const posts = ref(undefined);     
    const selected = ref(undefined);
    onMounted(()=>{
        // CALL THE AXIOS METHOD FROM WITHIN THE LIFECYCLE HOOK AND HANDLE THE PROMISE LIKE A BOSS
        axios.get('http://localhost')
        .then((res) => {
            selected.value = res[30];
        });
    });

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

根据您的评论；在模板中使用“selected”之前，您应该首先检查“selected！= null”是否。您可以使用这样的速记版本

<img :src=“selected?.flag” />