Skip to content

Instantly share code, notes, and snippets.

@keedi

keedi/mojo-vue.pl

Forked from Tekki/mojo-vue.pl
Created August 9, 2018 06:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save keedi/1352219c8d94a2214208e679516101b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save keedi/1352219c8d94a2214208e679516101b6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Tekki Tekki revised this gist Mar 26, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions mojo-vue.pl
    View file
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@
    <table>
    <tr v-for="country in area.countries"><td>{{ country }}</td></tr>
    </table>
    <button v-on:click="showNorth()">Show countries from North America</button>
    <button v-on:click="showNorth()">Show countries in North America</button>
    </div>
    %= javascript 'https://unpkg.com/vue/dist/vue.min.js'
    @@ -63,7 +63,7 @@
    },
    data: { area: {} },
    methods: {
    getRegion: function(area) {console.log('here');
    getRegion: function(area) {
    var self = this;
    axios.get('/api/' + area).then(
    function(response) {
  2. @Tekki Tekki created this gist Mar 26, 2018.
    86 changes: 86 additions & 0 deletions mojo-vue.pl
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    #!/usr/bin/env perl
    use Mojolicious::Lite -signatures;


    get '/' => sub ($c) {
    $c->render(template => 'index');
    };

    get '/api/:region' => sub ($c) {
    my %regions = (
    north => {
    countries => [
    'Antigua and Barbuda', 'Bahamas',
    'Barbados', 'Belize',
    'Canada', 'Costa Rica',
    'Cuba', 'Dominica',
    'Dominican Republic', 'El Salvador',
    'Grenada', 'Guatemala',
    'Haiti', 'Honduras',
    'Jamaica', 'Mexico',
    'Nicaragua', 'Panama',
    'Saint Kitts and Nevis', 'Saint Lucia',
    'Saint Vincent and the Grenadines', 'Trinidad and Tobago',
    'United States',
    ],
    region => 'North America',
    },
    south => {
    countries => [
    'Argentina', 'Bolivia', 'Brazil', 'Chile',
    'Colombia', 'Ecuador', 'Guyana', 'Paraguay',
    'Peru', 'Suriname', 'Uruguay', 'Venezuela',
    ],
    region => 'South America',
    },
    );

    my $region = $regions{$c->param('region')} || {};
    $c->render(json => $region);
    };

    app->start;
    __DATA__
    @@ index.html.ep
    % layout 'default';
    % title 'Mojolicious-Vue.js Example';
    <div id="app">
    <h1>Countries in {{ area.region }}</h1>
    <table>
    <tr v-for="country in area.countries"><td>{{ country }}</td></tr>
    </table>
    <button v-on:click="showNorth()">Show countries from North America</button>
    </div>
    %= javascript 'https://unpkg.com/vue/dist/vue.min.js'
    %= javascript 'https://unpkg.com/axios/dist/axios.min.js'
    %= javascript begin
    var app = new Vue({
    el: '#app',
    created: function() {
    this.getRegion('south');
    },
    data: { area: {} },
    methods: {
    getRegion: function(area) {console.log('here');
    var self = this;
    axios.get('/api/' + area).then(
    function(response) {
    self.area = response.data;
    }
    );
    },
    showNorth: function() {
    this.getRegion('north');
    }
    }
    });
    % end
    @@ layouts/default.html.ep
    <!DOCTYPE html>
    <html>
    <head><title><%= title %></title></head>
    <body><%= content %></body>
    </html>