JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/youarei.min.js"></script>
<div id="filter-panel">
  <rt-filter-ch1></rt-filter-ch1>
  <rt-filter-ch2></rt-filter-ch2>
  <rt-filter-rd1></rt-filter-rd1>
  
  <hr>
  
  <h2>Object to URL</h2>
  {{ objToUrl }}
  
  <h2>URL to obj</h2>
  {{ urlToObj }}
</div>

Babel + JSX

Vue.component('rt-filter', {
	template: `
  <div class="filter">
  	<slot name="title"></slot>
    <slot name="body"></slot>
  </div>
  `
});

Vue.component('rt-filter-ch1', {
	name: 'rt-filter-ch1',
	template: `
  <rt-filter>
    <h3 slot="title">Чекбоксы 1</h3>
    <div slot="body">
       <label>
         <input v-model="$root.filter.ch1" type="checkbox" name="ch1" value="ch1-1"> ch1-1
         <input v-model="$root.filter.ch1" type="checkbox" name="ch1" value="ch1-2"> ch1-2
         <input v-model="$root.filter.ch1" type="checkbox" name="ch1" value="ch1-3"> ch1-3
         <input v-model="$root.filter.ch1" type="checkbox" name="ch1" value="ch1-4"> ch1-4
       </label>
    </div>
  </rt-filter>
  `
});

Vue.component('rt-filter-ch2', {
	name: 'rt-filter-ch2',
	template: `
  <rt-filter>
    <h3 slot="title">Чекбоксы 2</h3>
    <div slot="body">
       <label>
         <input v-model="$root.filter.ch2" type="checkbox" name="ch2" value="ch2-1"> ch2-1
         <input v-model="$root.filter.ch2" type="checkbox" name="ch2" value="ch2-2"> ch2-2
         <input v-model="$root.filter.ch2" type="checkbox" name="ch2" value="ch2-3"> ch2-3
         <input v-model="$root.filter.ch2" type="checkbox" name="ch2" value="ch2-4"> ch2-4
       </label>
    </div>
  </rt-filter>
  `
});

Vue.component('rt-filter-rd1', {
	name: 'rt-filter-rd1',
	template: `
  <rt-filter>
    <h3 slot="title">Радио</h3>
    <div slot="body">
       <label>
         <input v-model="$root.filter.rd1" type="radio" name="rd1" value="rd1-1"> rd1-1
         <input v-model="$root.filter.rd1" type="radio" name="rd1" value="rd1-2"> rd1-2
         <input v-model="$root.filter.rd1" type="radio" name="rd1" value="rd1-3"> rd1-3
       </label>
    </div>
  </rt-filter>
  `
});

new Vue({
	el: '#filter-panel',
  uri: '',
  data: {
  	filter: {
    	ch1: [],
      ch2: [],
      rd1: []
    }
  },
  created() {
  	const windowLocationHref = 'https://rabotatk.ru/?ch1=ch1-3&ch1=ch1-2&ch1=ch1-1&ch2=ch2-1&rd1=rd1-2';
 ...