write-query-param.html

---
title: "Write Query Parameter Demo"
layout: example.njk
---

<div
  x-data="{
    library: new URLSearchParams(location.search).get('lib') || 'alpine',
    libraries: [
      {
        id: 'vue',
        name: 'Vue',
        stars: '162k',
        description: 'Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.',
        url: 'https://vuejs.org/'
      },
      {
        id: 'react',
        name: 'React',
        stars: '147k',
        description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
        url: 'https://reactjs.org/'
      },
      {
        id: 'alpine',
        name: 'Alpine.js',
        stars: '6.2k',
        description: 'A rugged, minimal framework for composing JavaScript behavior in your markup.',
        url: 'https://github.com/alpinejs/alpine'
      }
    ]
  }"
  x-init="$watch('library', (value) => {
    const url = new URL(window.location.href);
    url.searchParams.set('lib', value);
    history.pushState(null, document.title, url.toString());
  })"
  class="flex flex-col md:w-2/3 mx-auto"
>
  <p class="mb-2">location.search: "<span x-text="location.search"></span>"</p>
  <p class="mb-2">
    Param "library" (initialised from "lib" URL query param): "<span
      x-text="library"
    ></span
    >"
  </p>
  <div class="mb-2">
    <select
      name="lib"
      x-model="library"
      class="inline-block w-full appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
    >
      <template x-for="lib in libraries" :key="lib.id">
        <option
          :value="lib.id"
          x-text="lib.name"
          :selected="lib.id === library"
        ></option>
      </template>
    </select>
  </div>
  <template x-if="library">
    <ul>
      Library information:
      <li>
        <strong>Name</strong>:
        <span x-text="libraries.find(l => l.id === library).name"></span>
      </li>
      <li>
        <strong>Description</strong>:
        <span x-text="libraries.find(l => l.id === library).description"></span>
      </li>
      <li>
        <strong>Stars</strong>:
        <span x-text="libraries.find(l => l.id === library).stars"></span>
      </li>
    </ul>
  </template>
</div>