Display a simple object using Vue js.

We will display below object using Vue js

links: [
   {
     name:'facebook',
     href:'http://facebook.com'
   },
   {
     name:'google',
     href:'http://google.com'
   },
   {
     name:'yahoo',
     href:'http://yahoo.com'
   }
]

We have some link name and url. We will display it in a list.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
   </head>
   <body>
      <div class="container" id="el">
      <p>{{name}}</p>
      <ul>
         <li v-for='link in links'>
         <a :href='link.href'>
            {{ link.name }}
         </a>
         </li>
      </ul>
      </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
   var vue = new Vue({
   el:'#el',
   data: {
     name:'Top Nav',
     links: [
             {
                name:'facebook',
                href:'http://facebook.com'
             },
             {
                name:'google',
                href:'http://google.com'
             },
             {
                name:'yahoo',
                href:'http://yahoo.com'
             }
     ]
   }
 });
</script>
</body>
</html>

Output :

CakePHP 3 : Change Default Layout

To change default layout in CakePHP, We need to go in cakephp AppController.php

In AppController we have to write cakephp beforeFilter method.
beforeFilter() method is executed before every action in the controller.

It will like below example :

Location : src/Controller/AppController.php

Note : Write this method after initialize() method in AppController
Continue reading “CakePHP 3 : Change Default Layout”