link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[Vue.js] Ajax request is not giving any datatemplate I'm facing problem withCategory controller where I'm sending axios request

when following a tutorial and making a single page app using laravel and vue.js. But at a certain point, an ajax request is not giving me the expected output. there is been trying many ways but nothing is working.

template I’m facing problem with

<template>
<v-container>
<v-form @submit.prevent=”create”>
<v-autocomplete
:items=”categories”
item-text=”name”
item-value=”id”
v-model=”form.category_id”
label=”Category”
\></v-autocomplete>
</template>

<script>
export default {
data() {
return {
form: {
title: null,
category_id: null,
body: null
},
categories: {}, //Expecting to populate the object with axios request.
errors: {}
};
},
created() {
axios.get(“/api/category”).then(res => (this.categories = res.data.data)); //This line is not populating the ‘categories’ object.
},
};
</script>

Category controller where I’m sending axios request

class CategoryController extends Controller
{
public function index()
{
return Category::latest()->get();
}

public function store(Request $request)
{
$category = new Category();
$category->name = $request->name;
$category->slug = Str::slug($request->name);
$category->save();
return response(‘Created’,Response::HTTP_CREATED);
}

public function show(Category $category)
{
return $category;
}

public function update(Request $request, Category $category)
{
$category->update([‘name’=>$request->name,’slug’=>Str::slug($request->name)]);
}

public function destroy(Category $category)
{
$category->delete();
return response(null,Response::HTTP_NO_CONTENT);
}
}

I expect to get the categories object to be populated with the axios request, but the categories boject is undefined

Solution :

Assuming that /api/category is for the index() method, the reason you’re not getting any results is because you’re not returning anything keyed by data (the 2nd in res.data.data), the information you need will be in res.data.

created() {
axios.get(“/api/category”)
.then(res => this.categories = res.data)
.catch(err => console.log(err));
},

[Vue.js] Import all vue js components in a single file

to import multiple Vuejs components to a legacy project.

Currently, there is included the following script in my website header:

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

and a component file ( I would like to separate each component in a different file )

<script type=”module” src=”comp1.js”></script>
<script type=”module” src=”comp2.js”></script>

It does work, but to have one JS file that will import all other components so I can point to it in my HTML to a single JS file.

Any idea?

Solution :

Create a folder for the bundler - frontend-dev for example.

$ cd frontend-dev
$ npm init

add the following dependencies

“devDependencies”: {
“@babel/core”: “^7.2.2”,
“@babel/preset-env”: “^7.3.1”,
“babel-loader”: “^8.0.5”,
“webpack”: “^4.29.3”,
“webpack-cli”: “^3.2.3”
}

$ npm install

Create webpack.config.js with the following minimal configs:

let path = require(‘path’);

module.exports = {

output: {
path: p(‘../public’), // where to create bundles files
publicPath: ‘/public/‘, // public path to the created files
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
options: {
presets: [‘@babel/preset-env’]
}
}
},
]
},
};

/**
* Path.resolve alias curried with current directory (__dirname)
* as first parameter
*/
function p(){
return path.resolve(__dirname, …arguments)
}

In frontend-dev create folder src and index.js in it:

// index.js
import ‘../../comp1.js’
import ‘../../comp2.js’

Add “build”: “webpack” command in scripts section in package.json and run npm run build to see you bundled.js file in the specified public dir.

You can use require.context to import all files in a directory see webpack docs.

[Vue.js] issue with slowly geting data from api to vue view

there is issue with very slowly getting data from laravel api to vue.js view, I did tutorial where I have:

import axios from ‘axios’;

const client = axios.create({
baseURL: ‘/api’,
});

export default {
all(params) {
return client.get(‘users’, params);
},
find(id) {
return client.get(`users/${id}`);
},
update(id, data) {
return client.put(`users/${id}`, data);
},
delete(id) {
return client.delete(`users/${id}`);
},
};

<script>
import api from “../api/users”;

export default {
data() {
return {
message: null,
loaded: false,
saving: false,
user: {
id: null,
name: “”,
email: “”
}
};
},
methods: {
onDelete() {
this.saving = true;
api.delete(this.user.id).then(response => {
this.message = “User Deleted”;
setTimeout(() => this.$router.push({ name: “users.index” }), 1000);
});
},
onSubmit(event) {
this.saving = true;

api
.update(this.user.id, {
name: this.user.name,
email: this.user.email
})
.then(response => {
this.message = “User updated”;
setTimeout(() => (this.message = null), 10000);
this.user = response.data.data;
})
.catch(error => {
console.log(error);
})
.then(_ => (this.saving = false));
}
},
created() {
api.find(this.$route.params.id).then(response => {
this.loaded = true;
this.user = response.data.data;
});
}
};
</script>

It’s load data from api very slowly I see firstly empty inputs in view and after some short time I see data, if I open api data from laravel I see data immediately, so my question is How speed up it? Or maby I did something wrong?

Solution :

Whenever when using an API with Vue, I usually make most of my API calls before opening the vue.js then passing it in like this.

<vue-component :user=”‘{!! $user_data !!}’”></vue-component>

But if you have to do it in the vue.js component, when not sure if this will show improvement over the method but I would set it up with the “mounted” like so.

export default {
mounted() {
api.find(this.$route.params.id).then(response => {
this.loaded = true;
this.user = response.data.data;
});
}
}

Also heres a good tutorial on Axios and how to use HTTP Requets with Vue.

Hopefully this answered the question, good luck!

[Vue.js] Why do I see TypeScript in Vue.js source code?

I went through the vue.js source code just to have a look, and I saw some strange code, which I learnt was TypeScript syntax after some research. My problem is, this syntax is in a “.js” file, which I don’t understand because I know TypeScript files (.ts) should compile to pure JS. So why do I still see the type annotation in the function parameter in a .js file?

function hasAncestorData (node: VNode) {
const parentNode = node.parent
return isDef(parentNode) && (isDef(parentNode.data) || hasAncestorData(parentNode))
}

Solution :

This is actually a Flow code. You can see the /* @flow */ comment at the beginning of some files that enables the tool’s type checking. It’s a bit similar to TypeScript, but those are not the same things.

A quick look through the src folder of the Vue.js github repo shows that they do indeed use .js for their JavaScript w/Flow code, for instance in src/core/vdom/create-component.js:

const componentVNodeHooks = {
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {

But if we look in the dist folder, we can see that those Flow type annotations have been removed for distribution. For instance, here’s the above in dist/vue.js (that line number will rot over time):

var componentVNodeHooks = {
init: function init (vnode, hydrating) {

[Vue.js] How to pass variable from axios get request to sub-component in vuejs?

I do axios get request in following way:

index() {
axios.get(‘/list/items’).then(response => {
this.items = response.data.items;
this.stats = response.data.stats;
}

If I do console.log(this.stats) I see correct data listed as array.

to pass this data to a subcomponent like:

<stats :stats-list=”stats”></stats>
or

<stats v-bind:stats-list=”stats”></stats>

In my subcomponent I try to get this data like:

props: [‘statsList’],
mounted() {
console.log(this.statsList);
}

I get here undefined.

What should I do to get this data from parent component?

Solution :

Try this -

v-if

<stats :stats-list=”stats” v-if=”statsList”></stats>

Let me know if it works!

Solution 2:

you should pass a initial value to stats, or use prop validation to set default value
computed works too.

props: [‘rawStatsList’],
computed: {
statsList(){ return this.rawStatsList? this.rawStatsList : []; }
}

use v-if will hide block until axios done, but notice that it won’t show up if axios has error

[Vue.js] How to add splash screen for iOS using Vuetify

Hi Im trying to create a splash screen for my Vuetify PWA but its not working. I’m personally using an iPhone XS and its not working for whatever reason.

This tutorial works on my phone and I followed what he did https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210

However he isn’t using vue.js or Vuetify which could be the difference. I looked at this one as well who is using vue.js but that method didn’t seam to work for me either just adding the splashscreens in the manifest under icons https://medium.com/@eder.ramirez87/modern-pwa-with-vue-cli-3-vuetify-firestore-workbox-part-1-974383be5540

Honestly I didn’t read his whole project so maybe he doesn’t even have splash screens although the links look to be called splash screen. his repository is https://github.com/Eder87rh/cropchien/blob/master/public/manifest.json

this is my pwa https://rosedronesolutions.com so just to be clear the splash screen is what should be shown when you click on the app and it hasn’t loaded the app yet.

when curious about what the right screen resolutions I should be using both in the splash screen as well as iPhone media size because there is like resolution and logical resolution but whatever I just did what that guy did that worked in his sample https://pwa-splash.now.sh/ but didn’t work in mine.

To be honest I should probably know how to share my repository but I don’t. Its on code commit but maybe you don’t need the whole thing anyway. Here is the stuff I added to my index.html and then added the splashscreens in a folder in public called splashscreens

<link href=”splashscreens/iphone5_splash.png” media=”(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/iphone6_splash.png” media=”(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/iphoneplus_splash.png” media=”(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/iphonex_splash.png” media=”(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/iphonexr_splash.png” media=”(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/iphonexsmax_splash.png” media=”(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/ipad_splash.png” media=”(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/ipadpro1_splash.png” media=”(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/ipadpro3_splash.png” media=”(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<link href=”splashscreens/ipadpro2_splash.png” media=”(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” rel=”apple-touch-startup-image” />
<meta name=”mobile-web-app-capable” content=”yes” />
<meta name=”apple-touch-fullscreen” content=”yes” />
<meta name=”apple-mobile-web-app-title” content=”Rose Drone” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />

Solution :

Take a look at this post: PWA Tips and Tricks

[Vue.js] Vuetify v-ripple can only be used on block-level elements

I just started getting this error today, and it broke my whole site (because like a fool I’m loading Vuetify on page load).

Does anyone know what this means or how to fix it? Googling around didn’t reveal anything helpful.

Edit:

To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:

<link href=”https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel=”stylesheet”>

And solved the problem by importing it from the installed package instead with

import ‘vuetify/dist/vuetify.min.css’

in app.js.

I’m still interested in learning about this v-ripple business, though.

Solution :

I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:

@charset “UTF-8”;
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.

It looks like they bumped the dist version (I’m working with 1.5.12). I updated my link href to:

https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.css

…and my site was put back together again. It’s probably better practice to bring it in as a module but that’ll be something for the backlog. Hope this helps somebody.

[Vue.js] How do I toggle a class to show which tab is active in VueJS?

there is created two tabs, which I would like the class of active set on the first <li> by default.

Then, when the second tab is selected, the .active class should pass to the second <li> and be removed from the first.

I can use CSS to create some style rules in order to give a visual indicator as to which tab is currently active.

there is also created a JS Fiddle to see the current output.

Any help welcome as when rather stuck.

<ul class=”overlay-panel-actions-primary”>
<li v-for=”(tab, index) in tabs” @click=”currentTab = index”>{tab}</li>
</ul>
<div class=”content-bd”>
<div class=”tab-content”>
<div v-show=”currentTab === 0”>
List of filters options
</div>
<div v-show=”currentTab === 1”>
List of sort options
</div>
</div>
</div>

new Vue({
el: “#app”,
data() {
return {
currentTab: 0,
tabs: [‘Filter’, ‘Sort’]
};
},
})

Solution :

Use this -

:class=”{active: currentTab === index}”

<li v-for=”(tab, index) in tabs” @click=”currentTab = index” :class=”{active: currentTab === index}”>{tab}</li>

Let me know if it works.

Fiddle - https://jsfiddle.net/so3mf8h9/

Solution 2:

Edit: Ah, sorry I thought you were using vue-router. When the site gets bigger, it may be an idea to start using router, and when you do, this method will work for you

vue.js has this functionality built in

All you need to do is add this into the stylesheet

.router-link-exact-active {
// the styles go here
border: 5px dashed red;
}

Reference: vue.js documentation

Here’s an example of how I implemented it in a vue.js site I made a couple weeks back: Markup, and Styles. Hope that helps, let me know if you’ve got any more questions on implementing this

[Vue.js] vue 2 @click handler not working as expected

there is a “card” component with many “faces”.
Click the card and it shows another face.

<template lang=”pug”>
.infini-card(@click.prevent=”clickCard”)
infini-card-empty(v-if=”face===’empty’”)
infini-card-secret(v-if=”face===’secret’” v-bind=”cardData”)
infini-card-reveal(v-if=”face===’reveal’” v-bind=”cardData”)
</template>

The “.infini-card” div has a click handler and I can do a switch() there to process changes for all the different kinds of faces. Cool.

But, the first thing I tried didn’t work:

<template lang=”pug”>
.infini-card
infini-card-empty(v-if=”face===’empty’”)
infini-card-secret(v-if=”face===’secret’” v-bind=”cardData” @click.prevent=”clickSecret”)
infini-card-reveal(v-if=”face===’reveal’” v-bind=”cardData”)
</template>

The clickSecret() method is never called on the v-if’d face. This component is instantiated in another pug template like this: infini-card(v-bind.sync=”cardA”)

Why? :-)

Thanks in advance!

Solution :

Note that @click works differently for native elements vs vue.js components.

On a native component (<div>, <button>), @click listens for the a click event.

On a custom component (<infini-card-secret>), @click listens for a event emit ‘click’ from that custom component (this.$emit(‘click’))

To make sure @click listens for the native click event on custom components, use the .native modifier, like this:

@click.native=”clickSecret”.

vue.js Docs: Binding Native Events to Components

[Vue.js] There's a way to vuetify snackbar opens just once?

I’m inserting a snackbar and would like to know if it has a way to make it appear only once for the user using browser’s cache.

This is what i got so far.

<template>
<v-card>
<v-snackbar
v-model=”snackbar”
:bottom=”y === ‘bottom’”
:left=”x === ‘left’”
:multi-line=”mode === ‘multi-line’”
:right=”x === ‘right’”
:timeout=”timeout”
:top=”y === ‘top’”
:vertical=”mode === ‘vertical’”
\>
<router-link :to=”rota” @click=”snackbar = false” id=”snackbarTexto”
\><span>{ text }</span></router-link
\>
<v-btn id=”btnSnackbar” flat @click=”snackbar = false”>
Fechar
</v-btn>
</v-snackbar>
</v-card>
</template>

new Vue({
el: ‘#app’,
data () {
return {
snackbar: true,
y: “top”,
x: null,
mode: “”,
timeout: 0,
text: “Clique aqui para preencher a avaliao do mdulo”,
rota: “/avaliacao_modulo”
};
}
})

https://codepen.io/anon/pen/OGwzGG

Thank you.

Solution :

The simple solution is to use LocalStorage to save snackbar data on the client.

1.When the component is first created, get the value of mySnackbarValue stored in localStorage and set it to the value of snackbar of our component data if it exits in localStorage.

created(){
if (localStorage.getItem(‘mySnackbarValue’)) this.snackbar = JSON.parse(localStorage.getItem(‘mySnackbarValue’));
}

NOTE: Since LocalStorage stores strings only, so, JSON.parse(localStorage.getItem(‘mySnackbarValue’)); parses back to Boolean.

2.Now, we to need set the value of mySnackbarValue in our localStorage when the snackbar value of component data changes by using watch.

watch:{
snackbar:{
handler(){
localStorage.setItem(‘mySnackbarValue’, this.snackbar);
},
},
}

3.snackbar in data component is set true by default.

new Vue({
el: ‘#app’,
data () {
return {
snackbar: true
};
}
})

The complete code is as follows:

<template>
<v-card>
<v-snackbar
v-model=”snackbar”
:bottom=”y === ‘bottom’”
:left=”x === ‘left’”
:multi-line=”mode === ‘multi-line’”
:right=”x === ‘right’”
:timeout=”timeout”
:top=”y === ‘top’”
:vertical=”mode === ‘vertical’”
\>
<router-link :to=”rota” @click=”snackbar = false” id=”snackbarTexto”
\><span>{ text }</span></router-link
\>
<v-btn id=”btnSnackbar” flat @click=”snackbar = false”>
Fechar
</v-btn>
</v-snackbar>
</v-card>
</template>

new Vue({
el: ‘#app’,
data () {
return {
snackbar: true,
y: “top”,
x: null,
mode: “”,
timeout: 0,
text: “Clique aqui para preencher a avaliao do mdulo”,
rota: “/avaliacao_modulo”
};
},
watch: {
snackbar: {
handler() {
localStorage.setItem(‘mySnackbarValue’, this.snackbar);
},
},
},
created(){
if (localStorage.getItem(‘mySnackbarValue’)) this.snackbar = JSON.parse(localStorage.getItem(‘mySnackbarValue’));
}
})

Solution 2:

I would recommend using a library such as js-cookie to store a cookie denoting if the user has seen the snackbar message yet.

I’m not sure what type of build system you are using, or if you are using node/npm. You will have to import some type of cookie library, or manage the cookies yourself via vanilla JavaScript.

Also, I left the part of abstraction to you. Make sure that this is easy to change in case you want to implement any new types of messages later on. I hope this helps out!

<template>
<v-card>
<v-snackbar v-model=”showSnackbar”
:bottom=”y === ‘bottom’”
:left=”x === ‘left’”
:multi-line=”mode === ‘multi-line’”
:right=”x === ‘right’”
:timeout=”timeout”
:top=”y === ‘top’”
:vertical=”mode === ‘vertical’”>
<router-link :to=”rota” @click=”showSnackbar = false” id=”snackbarTexto”>
<span>{ text }</span>
</router-link>

<v-btn id=”btnSnackbar” flat @click=”showSnackbar = false”>
Fechar
</v-btn>
</v-snackbar>
</v-card>
</template>

// Import js-cookie
// https://www.npmjs.com/package/js-cookie
import cookie from ‘js-cookie’;

new Vue({
el: ‘#app’,
data () {
return {
// Set to false initially
showSnackbar: false,

y: “top”,
x: null,
mode: “”,
timeout: 0,
text: “Clique aqui para preencher a avaliao do mdulo”,
rota: “/avaliacao_modulo”
};
},

created() {
// Give the snackbar cookie a name
let cookieName = ‘snackbar’;

// Check browser cookies for a snackbar cookie
let snackbarCookie = cookie.get(cookieName);

// If we have no cookie
if (!snackbarCookie) {
// Set a cookie so the snackbar doesn’t come up again
cookie.set(cookieName, true);

// Show the snackbar
this.showSnackbar = true;
}
},
});