deliciousbrains / serialized-editor

A Vue.js component for editing data that has been serialized in PHP

Serialized Editor

A Vue.js component for editing data that has been serialized in PHP.

Requirements

• Vue.js 2.x

Install

npm install @deliciousbrains/serialized-editor
// or
yarn add @deliciousbrains/serialized-editor

Usage

The package comes in two parts

1. A SerializedParser class to convert a PHP serialized string into JSON
2. A SerializedEditor vue.js component

First you need to import the components:

import { SerializedParser, SerializedEditor } from '@deliciousbrains/serialized-editor';

Next you need to convert the serialized data into JSON:

computed: {
    parsedData() {
        var sp = new SerializedParser(serializedString);

        try {
            var json = sp.parse();
            return JSON.parse(json);
        } catch (e) {
            console.error(e);
        }

        return {};
    }
}

Then you can pass the json-data into the component:

<serialized-editor :json-data="parsedData" @output="updateOutput"></serialized-editor>

API

Props

Name	Type	Description
json-data	Object	The JSON data returned from the SerializedParser class

Events

Name	Description
output	Triggered when any data changes. Returns the new value in the PHP serialized format.

Credits

Serialized Editor was created by Gilbert Pellegrom from Delicious Brains. Released under the MIT license.