Datatable : ajax Datatable

https://gist.github.com/xavier83ar/0ab7c37bc057e81271501765e58d5d06

Vue js : Vue.js Component Props

Props are used to pass down state to child components. Learn all about them

Published Jun 17, 2018

Learning Vue? Download my free Vue Handbook 🔥

---

• Define a prop inside the component
• Accept multiple props
• Set the prop type
• Set a prop to be mandatory
• Set the default value of a prop
• Passing props to the component

Define a prop inside the component

Props are the way components can accept data from components that include them (parent components).

When a component expects one or more prop, it must define them in its props property:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

Accept multiple props

You can have multiple props by appending them to the array:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Set the prop type

You can specify the type of a prop by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

The valid types you can use are:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

When a type mismatches, Vue alerts (in development mode) in the console with a warning.

Prop types can be more articulated.

You can allow multiple different value types:

props: {
  firstName: [String, Number]
}

Set a prop to be mandatory

You can require a prop to be mandatory:

props: {
  firstName: {
    type: String,
    required: true
  }
}

Set the default value of a prop

You can specify a default value:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

For objects:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default can also be a function that returns an appropriate value, rather than being the actual value.

You can even build a custom validator, which is cool for complex data:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Passing props to the component

You pass a prop to a component using the syntax

<ComponentName color="white" />

if what you pass is a static value.

If it’s a data property, you use

<template>
  <ComponentName :color=color />
</template>

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>

Passing data from parent to child via props

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">

<p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

https://flaviocopes.com/vue-props/

Vue js : Vue Router Nested Routing tutorial

In this tutorial, we will learn about nested routing in vue router with the help of an example.

Nested Routing

Nested routing helps us to render sub-routes inside a particular route like user/1 or user/1/post.

In vue router normally we define one root <router-view> outlet where it renders the component which matches the defined path similarly, a rendered component can also contain it’s own, nested <router-view>.

Let’s create a User component with <router-view> outlet.

User.vue

<template>
  <div>
    <h1>User page</h1>
    <router-view></router-view>  </div>
</template>

To create a nested routing inside User component we need to add child routes in vue router constructor.

main.js

import Vue from 'vue'
import App from './App.vue';
import VueRouter from "vue-router";
import Home from './components/Home.vue';
import User from './components/User.vue';
import UserInfo from './components/UserInfo.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: '/', component: Home },
    {
      path: '/user', component: User, children: [
          //UserInfo component is rendered when /user/:id is matched
        { path: ':id', component: UserInfo, props: true }      ]
    },
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

In the above code, we have added children array with nested routes in our Usercomponent.so that UserInfo component is rendered inside the User component when it matches user/:id.

Now inside UserInfo component we can access the dynamic segment id with props.

UserInfo.vue

<template>
  <div>
    <h2>User ID {{id}}</h2>
  </div>
</template>

<script>
export default {
  props: ["id"]};
</script>

Let’s update our User component by adding navigation for the nested routes.

User.vue

<template>
  <div>
    <h1>User page</h1>
    <strong>Select a user</strong>
    <ul class="nav">
      <router-link to="/user/1">User 1</router-link>      <router-link to="/user/2">User 2</router-link>      <router-link to="/user/3">User 3</router-link>    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
</script>