Vue

by WILLIAM CORREA

HTML

<div id="app">
  <input type="text" v-model="json">
  <pre>{{ serialized }}</pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  width: 100%;
}

Vue

/**
 * @param {object} object
 * @param {string} prefix
 * @returns {string}
 */
const serialize = (object, prefix = '') => {
  const string = []
  for (let property in object) {
    if (!object.hasOwnProperty(property)) {
      continue
    }
    let key = prefix ? prefix + '[' + property + ']' : property
    let value = object[property]
    let serialized = ''
    if (value && typeof value === 'object') {
      serialized = serialize(value, key)
    }
    else {
      serialized = encodeURIComponent(key) + '=' + encodeURIComponent(value)
    }
    string.push(serialized)
  }
  return string.join('&')
}

new Vue({
  el: "#app",
  data: {
    json: '{"search": {"ativo": 1,"grupo_id": 2}}'
  },
  computed: {
  	serialized () {
    	try {
    		return decodeURIComponent(serialize(JSON.parse(this.json))	)
      } catch (e) {
      	return '<error>'
      }
    }
  }
})