Clicking tabs selects options trying to get options to select corresponding tabs

[jamesgrubb]

Hello I have two tabs and two corresponding select options clicking tabs toggles paragraphs visibility. Id like to be able to do toggle the paragraphs visibility selecting the options. Not really sure what Im doing. Thanks in advance

  <div>
    <template x-for="tab in tabs" :key="tab.id">
      <button @custom-event="$event.detail === tab.title ? $el.clikc() : ''" x-ref="tab.title" x-text="tab.title" @click="activeTab = tab.id"></button>
    </template>
  </div>
  <div class="">
    <template x-for="tab in tabs" :key="tab.id">
      <p x-text="tab.text" x-show="tab.id === activeTab"></p>
    </template>
  </div>
  <div>
    <select name="" id="">
    <template x-for="tab in tabs" x-model="activeTab" :key="tab.id" @change="$dispatch('custom-event', 'activeTab'" >
      <option value="" :selected="activeTab === tab.id" x-text="tab.title"></option>
    </template>
      </select>
  </div>
</div>
<script>
function data(){
  return{
    activeTab : 0,
    tabs: [
      {
        id: 0,
        title: 'tab-1',
        text: 'all the text',
      },
            {
        id: 1,
        title: 'tab-2',
        text: 'all the tab 2 text',
      }
    ]
  }
}
</script>

[KevinBatdorf]

I see a few things at first glance but some of the component is missing. Can you put a demo on codepen or elsewhere if the following doesn't help?

• Typo in click
• @change="$dispatch('custom-event', 'activeTab'"is missing a final )
• The @change event should be on the <select>.
• If an event listener is not a parent of the event $dispatch() then you need to add the .window modifier to the listener. i.e. @custom-event.window

[jamesgrubb]

Yup my bad just doing than now

[jamesgrubb]

One of the things I cant get my head around is that for example when I'm using a template to loop through an array to create a number of buttons (for example) I can create dynamic refs $ref.tab.title but when I have the set up the select options using an array I don't see a way of accessing those refs as the setup needs to be:

<div>
<template x-for="tab in tabs" :key="tab.id> // <- dynamically created ref
<button $ref="tab.title" x-text="tab.title"></button>
</template>
<select @change="$refs.tab.title ...."> // <- wont be iterated. How would I use the refs?
<template x-for="tab in tabs" :key="option.id"  > 
<option x-text="option.title"> // <-
</template>

[KevinBatdorf]

You would need something like $refs[tabs[$event.detail]].title = '' I think, and the loop index to be set on the option as the value.

But looks like you were on the right direction by using activeTab in your original example. You should track the state and let everything else react to it, instead of setting it elsewhere manually.

[jamesgrubb]

I'll have a stab at it. But might come back here for help if that's ok.

[KevinBatdorf]

You can also find help on the Discord server too. More people likely to chime in there.

[jamesgrubb]

Here is a pen