Suzuki Wagon R HYBRID මෝටර් රථ වල නිතර දක්නට ලැබෙන දෝෂයන් (Faults)…………………. Suzuki Wagon R මේ වන ලංකාවේ බහුලව දක්නට ලැබෙන හා ඉතාමත් ජනප්රිය කුඩා ප්රමාණයේ Micro Hybrid මෝටර් රථයකි. FZ , Stingray හා J style මාදිලි ලෙසත් chassis නොම්බර ලෙස MH44S හා MH55S ලෙසද වෙනස් වේ. Spacia හා Hustler ලෙස මාදිලි දෙකක්ද ඇති අතර […]
Blog
When you develop Vue.js application you can write data objects Reactivity does not work when you add object property on the fly
Define Javascript Objaect We will see how to define Javascript Object called Product with some properties like name and the id
|
1 2 3 4 5 |
var product = { id: 0001, name: 'Coca Cola 175ml', }; |
How to access the property You can use the dot syntax to access the property
|
1 |
console.log(product.name) |
I need to set the deault value to the select dropdown in Vue.js compoenent I am retrieving the data from REST API end point This is what I have in template section of the component
|
1 2 3 4 5 6 7 |
<div class="select is-small" > <select v-model="category"> <option v-for="(category, index) in categories" :value="category.id" >{{category.name}}</option> </select> </div> |
I have named the model v-model=”category” which is defined in data() section
|
1 2 3 4 5 |
data () { return { category:'' } }, |
In the mount() , I am […]
If you want to disable hyper links in your Vue component you can use the following code. So this will make your link not clickable and grays it out to look diabled
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <nav class="pagination is-rounded" role="navigation" aria-label="pagination"> <ul style="margin-left:10px" class="pagination-list"> <li>{{meta.from}} - {{meta.to}} of {{meta.total}} </li> <li><span class="pagination-ellipsis">…</span></li> <li :class="meta.current_page == 1 && 'disabled'"> <a class="pagination-link" @click="paginationClick" :id="(meta.current_page -1)"><</a> </li> <li :class="meta.current_page === meta.last_page && 'disabled'"><a class="pagination-link" @click="paginationClick" :id="(meta.current_page +1)">></a></li> <li><span class="pagination-ellipsis">…</span></li> </ul> </nav> </template> <style> .disabled { pointer-events:none; opacity:0.6; } </style> |
Vuex actions are asynchronous. So you are calling actions from your Vue component there should be a way to to know that the action you called , is completed successfully or not. So, the best way to do is, wrap your action around promises I have the following code in my store.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
actions: { getProductTable(context, data) { return new Promise((resolve, reject) => { axios.defaults.headers.common['Authorization'] = 'Bearer '+ context.state.token axios.get("api/products?page="+data.page).then(response => { resolve(response); }, error => { reject(error); }) }) }, } |
In […]
If you have url like this in your application http://127.0.0.1:8000/purchaseorders#/products/5/view?page=2 and you want to get the value of the page parameter. You can use following code to achieve it console.log(this.$route.query.page)
What is computed property? This can be considered as property of the data object or methods you can access them as if they were properties of the data object, but you define them as functions. Why do you need computed property? The computed properties are cached and when you run the method several time cached […]
Intsall the followoing package in your Laravel project First you can install the third-party JWT package by running the following command in your terminal
|
1 |
composer require tymon/jwt-auth:dev-develop --prefer-source |
Open config/app.php and add the following provider to the providers array:
|
1 2 3 4 5 |
'providers' => [ ...... Tymon\JWTAuth\Providers\LaravelServiceProvider::class, ], |
|
1 2 3 4 5 |
'aliases' => [ .... 'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class, 'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class, ] |
Use the following command to publish JWT provider
|
1 |
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider" |
Now you can use following command to generate […]
JWT stands for JASON Web Token which is an open standard based on RFC 7519 You can use JWT to securely transfer information between any two bodies using JSON objects which is digitally signed so information is trusted and verified JWT can send data via URL, POST request or HTTP header. JWT itself has the […]