Norway


You can easily embed JSON in your Vue with a new double-encoding method. If you use Vue with a server-side application like Laravel, chances are that you’ve seeded Vue with some JSON data or user-generated content (UGC) that looks something like the following:

@extends('layout')
@section('content')

    <div id="">
        <example-component
            :example-data="{{ json_encode([
                'wrestler_name' => '"Mercenary" Keith Anderson'
            ]) }}"
        >
        </example-component>
    </div>

@endsection

Unfortunately, if your data has HTML entities, your Vue application will get stopped dead in its tracks.

As of Laravel 5.5.29, Taylor Otwell introduced a doubleEncode() method to the Blade compiler, which solves this issue easily.

Adam Walthan Tweeted about how to use double-encoding with this example:

Fortunately, it’s easy to remedy by adding the new Blade::doubleEncode() method in your AppServiceProvider::boot() method:

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::doubleEncode();
    }
}

The original <example-component> example I shared would now look like the following with double-encoding:

- Screen Shot 2018 01 28 at 9 - Safely Seed Your Vue Components with Blade Double-encoding

I’ve fought with seeding Vue components with JSON data, and it’s nice that Laravel can automatically make this stuff so much easier to deal with now!





Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here