sironekotoro/connpass_vue_simple3.pl

## connpass_vue_simple3.pl
#!/usr/bin/env perl
use Mojolicious::Lite;

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

app->start;
__DATA__

@@ index.html.ep
% layout 'default';
% title 'Welcome';
<h1>divにconnpassのURLいれて、それを何か編集して返す</h1>

<h2>vueインスタンス内にURL書いてお任せしてみる</h2>

<div id="app">
<ul>
<% for my $region ('tokyo', 'osaka'){ %>
  <% for my $propaty ('event_id', 'title', 'started_at', 'limit' ,'accepted', 'waiting', 'address', 'place'){ %>
    <li><%= $region %>の<%= $propaty %>：{{ region["<%= $region %>"].<%= $propaty %> }}</li>
  <% } %>
  <hr>
<% } %>
</ul>

</div>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head>
  <title><%= title %></title>
  <style type="text/css">
<!--
.hidden {display:none;}
-->
  </style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios-jsonp/dist/index.min.js"></script>
  </head>
<body>
<%= content %>

<script>

var connpassUrls = {
  tokyo: 'https://connpass.com/api/v1/event/?event_id=151697',
  osaka: 'https://connpass.com/api/v1/event/?event_id=148660',
}

//var region;


new Vue({
  el: '#app',
  data: function(){
    return {
      region: {
        tokyo: null,
        osaka: null,
      },
    }
  },
  mounted () {
    this.getEventData('tokyo')
    this.getEventData('osaka')
  },
  methods: {
    getEventData: function(str){
      axios
        .get( connpassUrls[str] ,{ adapter: axiosJsonpAdapter,})
        .then( res => ( this.region[str] = res.data.events[0]) )
        .catch(err => console.err(err))
        .finally()
    }
  },
})

</script>

</body>

</html>
	#!/usr/bin/env perl
	use Mojolicious::Lite;

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

	app->start;
	__DATA__

	@@ index.html.ep
	% layout 'default';
	% title 'Welcome';
	<h1>divにconnpassのURLいれて、それを何か編集して返す</h1>

	<h2>vueインスタンス内にURL書いてお任せしてみる</h2>

	<div id="app">
	<ul>
	<% for my $region ('tokyo', 'osaka'){ %>
	<% for my $propaty ('event_id', 'title', 'started_at', 'limit' ,'accepted', 'waiting', 'address', 'place'){ %>
	<li><%= $region %>の<%= $propaty %>：{{ region["<%= $region %>"].<%= $propaty %> }}</li>
	<% } %>
	<hr>
	<% } %>
	</ul>

	</div>

	@@ layouts/default.html.ep
	<!DOCTYPE html>
	<html>
	<head>
	<title><%= title %></title>
	<style type="text/css">
	<!--
	.hidden {display:none;}
	-->
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios-jsonp/dist/index.min.js"></script>
	</head>
	<body>
	<%= content %>

	<script>

	var connpassUrls = {
	tokyo: 'https://connpass.com/api/v1/event/?event_id=151697',
	osaka: 'https://connpass.com/api/v1/event/?event_id=148660',
	}

	//var region;


	new Vue({
	el: '#app',
	data: function(){
	return {
	region: {
	tokyo: null,
	osaka: null,
	},
	}
	},
	mounted () {
	this.getEventData('tokyo')
	this.getEventData('osaka')
	},
	methods: {
	getEventData: function(str){
	axios
	.get( connpassUrls[str] ,{ adapter: axiosJsonpAdapter,})
	.then( res => ( this.region[str] = res.data.events[0]) )
	.catch(err => console.err(err))
	.finally()
	}
	},
	})

	</script>

	</body>

	</html>