1

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

我有下面的代码，使用 Tailwind 和 Headless UI，通过调试，我知道我喜欢 99% 的方式......除了持续的错误消息

未捕获的 ReferenceError：未定义帖子

我知道这应该是直截了当的，但是我在这里或通过 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，但我不明白怎么做？

4

1 回答 1

1

CAUSE OF YOUR ERROR:

You are trying to access an array element before the array is populated. Thus the undefined error.

EXPLANATION

You are using a mix of composition api and options api. Stick to one.

I am writing this answer assuming you will pick the composition api.

Follow the comments in the below snippet;

<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>

According to your comment; you should first check if the “selected != null” before using ‘selected’ inside the template. You can use a shorthand version like this

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

于 2021-11-26T15:49:02.547 回答