Невозможно определить переменную во Vue

Question

Я только начинаю использовать VueJS и Tailwind, никогда раньше не использовал ничего, связанного с npm.

У меня есть приведенный ниже код, использующий пользовательский интерфейс Tailwind и Headless, который благодаря отладке, я знаю, что я прошел 99% пути ... за исключением непрерывного сообщения об ошибке

Uncaught 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, но я не понимаю, как?

Answer 1

ПРИЧИНА ВАШЕЙ ОШИБКИ:

Вы пытаетесь получить доступ к элементу массива до его заполнения. Таким образом undefinedошибка.

ОБЪЯСНЕНИЕ

Вы используете сочетание API композиции и API опций . Придерживайтесь одного.

Я пишу этот ответ, предполагая, что вы выберете composition api.

Следуйте комментариям в приведенном ниже фрагменте;

      <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 != null», прежде чем использовать «selected» внутри шаблона. Вы можете использовать сокращенную версию, подобную этой

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