Widget Dynamic List Demo

Open widget-override in Script Kit

// Name: Widget Dynamic Lists

import "@johnlindquist/kit"

let names = ["John", "Mindy", "Ben", "Scooter"]
let items = _.shuffle(names).map(name => ({ name }))

let html = `
  <div class="flex flex-col w-screen h-screen justify-around items-center">
      <button
      class="rounded px-4 py-2 bg-black bg-opacity-50 hover:bg-opacity-25 w-1/2"
      v-for="(item, index) in items" :key="item.name" :data-name="item.name" :data-index="index">{{index}}. {{item.name}}</button>
      <div>{{selected}}</div>
  </div>  
  `

let w = await widget(html, {
    state: {
      items,
      selected: items[0].name
    }
  }
)

w.onClick(event => {
  if (event.dataset.name) {
    w.setState({selected: event.dataset.name})
  }
})

setInterval(() => {
  items = _.shuffle(items)
  w.setState({
    items,
  })
}, 1000)