0

We have this Listbox from HeadlessUI. Issue: unable to render content depending on listbox selected option.

This is the listbox:

<Listbox v-model="selectedElement">
        <ListboxButton class="">
             <span class="block truncate">{{ selectedElement.name }}</span>
         </ListboxButton>
         <ListboxOptions>
            <ListboxOption
                 v-slot="{ active, selected }"
                 v-for="element in elements"
                 :key="element.id"
                 :value="element"
                 as="template">
                 <li>
                    <span{{ element.name }}</span>
                 </li>
              </ListboxOption>
        </ListboxOptions>
 </Listbox>

The following isn't working:

 <div v-if="id === 0">
     render content related to id=0
 </div

data

const elements = [
  { id: 0, name: 'Simple elements' },
  { id: 1, name: 'Call to action' },
]
lopezi
  • 537
  • 2
  • 7
  • 20

1 Answers1

1

Condition was wrong...

<div v-if="selectedElement.id === 0">
    render content related to id=0
</div

...works

lopezi
  • 537
  • 2
  • 7
  • 20