Skip to content
JSON component and field for Kirby.
Vue PHP JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
localization
src Display info when object empty and not editable Sep 2, 2019
.editorconfig
.gitattributes
.gitignore
LICENSE
composer.json
index.css
index.js
index.php
package-lock.json
package.json

README.md

kirby-json

Kirby JSON field and JSON editor Vue component.

JSON editor component

Installation

With Composer:

composer require oblik/kirby-json

Usage

Field

In the blueprint:

fields:
  myData:
    type: json

Available blueprint options for the editor:

array: false  # Saved value should be an array?
keys: false   # Edit object keys?
values: true  # Edit values?
mutate: false # Add/remove entries?
sort: true    # Allow entry reordering?

In the template, use the native Kirby toData() method:

$data = $page->myData()->toData('json');

Component

If you're building a plugin and you need to allow the user to edit JSON, you can use the same component that the above JSON field uses, k-json-editor, in your own panel plugin:

<template>
  <k-json-editor
    v-model="data"
    :label="label"
    :options="options"
    @input="input"
  ></k-json-editor>
</template>

The options you can pass to the component:

{
  "isKeysEditable": true,
  "isValuesEditable": true,
  "isMutatable": true,
  "isSortable": true
}
You can’t perform that action at this time.