link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

[Vue.js] Vue list animation with Greensock JS hooks wait for leave to finish before enter

Is there a way to get vue.js to wait for elements to leave a list before new ones enter? At the moment, the animation for new elements entering the list plays at the same time as the animation for elements leaving the list:

var SPEED = 3;

var app = new Vue({
el: ‘.container’,
data: {
nodes: [
{id: 0, value: 5, name: “Alan”},
{id: 1, value: 15, name: “Bob”},
{id: 2, value: 25, name: “Charles”}
]
},
methods: {
enter(el, done) {
var bar = $(el).children(“.bar”);
TweenMax.fromTo(bar, SPEED, {width: 0}, {width: $(el).attr(“width”) * 10, onComplete: done});
},
leave(el, done) {
var bar = $(el).children(“.bar”);
TweenMax.fromTo(bar, SPEED, {width: $(el).attr(“width”) * 10}, {width: 0, onComplete: done});
},
swapBobDave() {
this.nodes = [
{id: 0, value: 5, name: “Alan”},
{id: 2, value: 25, name: “Charles”},
{id: 3, value: 35, name: “Dave”}
];
},
reset() {
this.nodes = [
{id: 0, value: 5, name: “Alan”},
{id: 1, value: 15, name: “Bob”},
{id: 2, value: 25, name: “Charles”}
];
}
}
});
body {
margin: 30px;
font-family: sans-serif;
}

.bar {
background-color: pink;
padding: 10px;
margin: 10px;
}
<script src=”http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class=”container”>
<h1>vue.js JS Hooks</h1>

<transition-group name=”list” tag=”div” v-on:enter=”enter” v-on:leave=”leave” v-bind:css=”false” appear>
<div v-for=”(node, index) in nodes” v-bind:key=”node.id” v-bind:width=”node.value”>
<div class=”bar” v-bind:style=”{width: node.value + ‘%’}”>{node.name}</div>
</div>
</transition-group>

<button type=”button” class=”btn btn-default” @click=”swapBobDave”>Add Dave and remove Bob</button>
<button type=”button” class=”btn btn-default” @click=”reset”>Reset</button>

</div>

Extra points for explaining why the leaving bar doesn’t get to width: 0 before disappearing!

Solution :

It’s a transition-group, so every change to the array is a different animation. If you always add an element and then remove another one, you can achieve it using a setTimeout on enter hook, having the same duration of SPEED.

enter(el, done) {

window.setTimeout( () => {

var bar = $(el).children(“.bar”);

TweenMax.fromTo(bar, SPEED, {width: 0}, {width: $(el).attr(“width”) * 10, onComplete: done});

}, SPEED * 1000 )

},

I also suggest you to alter the array in the following way

swapBobDave() {

this.nodes.splice(1,1);

this.nodes.push({id: 3, value: 35, name: “Dave”});

},

Concerning the bar, it reachs width: 0 but there is padding: 10px in the css. To fix it you can add margin directly to the text within, and remove padding on bar.

Hope it helps you.

[Vue.js] Laravel vue components not rendering

My vue.js components are not rendering on the page, despite following tutorials. there is the following layout (master.blade.php):

<html>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<link rel=”shortcut icon” href=”/favicon.ico”>
<meta name=”csrf-token” content=”{ csrf_token() }”>
<title>Mileage</title>
<link rel=”stylesheet” href=”{ mix(‘/css/app.css’) }” media=”all”>
</head>

<body>
<div id=”app”>
<example-component></example-component>
</div>
<script src=”{ mix(‘/js/app.js’) }”></script>
</body>
</html>

The layout is returned by the following controller (I use CAS for login):

<?php

namespace App\Http\Controllers;

use App\LkpStaff;
use Illuminate\Http\Request;

class AuthController extends Controller
{
public function login()
{
if (!cas()->isAuthenticated())
{
cas()->authenticate();
}

$user = cas()->user();

$dbUser = LkpStaff::where(‘user_name’, $user)->first([‘staff_refid’]);

if ($dbUser)
{
$userId = $dbUser->staff_refid;
}else
{
$userId = $this->createNewUser($user);
}

session()->put(‘casUser’, $user);
session()->put(‘userId’, $userId);

return view(‘master’, [
‘casUser’ => $user,
‘userId’ => $userId
]);
}
}

The CAS login works as intended, so that’s not a problem. when simply trying to render the example component that comes with laravel (ExampleComponent.vue):

<template>
<div class=”container”>
<div class=”row justify-content-center”>
<div class=”col-md-8”>
<div class=”card”>
<div class=”card-header”>Example Component</div>

<div class=”card-body”>
I’m an example component.
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
mounted() {
console.log(‘Component mounted.’)
}
}
</script>

My app.js file registers the component as expected:

require(‘./bootstrap’);

window.vue.js = require(‘vue’);

Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’));

const app = new Vue({
el: ‘#app’
});

My package.json is the following:

{
“private”: true,
“scripts”: {
“dev”: “npm run development”,
“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”,
“watch”: “npm run development — –watch”,
“watch-poll”: “npm run watch — –watch-poll”,
“hot”: “cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js –inline –hot –config=node_modules/laravel-mix/setup/webpack.config.js”,
“prod”: “npm run production”,
“production”: “cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js –no-progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”
},
“devDependencies”: {
“axios”: “^0.18”,
“bootstrap”: “^4.0.0”,
“cross-env”: “^5.1”,
“jquery”: “^3.2”,
“laravel-mix”: “^4.0.7”,
“lodash”: “^4.17.5”,
“popper.js”: “^1.12”,
“resolve-url-loader”: “^2.3.1”,
“sass”: “^1.15.2”,
“sass-loader”: “^7.1.0”,
“vue”: “^2.5.17”,
“vue-template-compiler”: “^2.6.10”
},
“dependencies”: {
“bulma”: “^0.7.0”,
“font-awesome”: “^4.7.0”,
“laravel-blade-compiler”: “^1.0.10”,
“moment”: “^2.24.0”,
“purify-css”: “^1.2.5”
}
}

I used npm install and npm run dev. I served the project with php artisan serve. The page looks like this (in the browser console):

<html><head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<link rel=”shortcut icon” href=”/favicon.ico”>
<meta name=”csrf-token” content=”gLzt6ZloAyL7kFEVuO0tHlv6XqlsCMlELSx9Eqg6”>
<title>Mileage</title>
<link rel=”stylesheet” href=”/css/app.css” media=”all”>
</head>

<body>
<div id=”app”>
<example-component></example-component>
</div>
<script src=”/js/app.js”></script>

</body></html>

As you can see, the component is not rendered. There are no errors in the console either. Is there anything I can do short of creating a new project?

Solution :

Maybe the component is not rendering due to wrong path issue for app.css and app.js.

Try to render by using asset like :

<link href=”{asset(‘css/app.css’)}” rel=”stylesheet” type=”text/css”>

<script src=”{asset(‘js/app.js’)}”></script>

Solution 2:

// UPDATE

require(‘./bootstrap’);

window.vue.js = require(‘vue’);

Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default);

const app = new Vue({
el: ‘#app’
});

add .default in component in the app.js.
Change the link and script uri

<link rel=”stylesheet” href=”{ asset(‘css/app.css’) }”>
<script src=”{ asset(‘js/app.js’) }”> </script>

[Vue.js] How to check component id, if id same then hide other component

i try to hide other component based on id that store a slug data,
if id of the component is not same as props id, to hide the other component

i cannot access the id of the component, i already try using $refs.componentName.id

// html
<div class=”box-portfolio” ref=”boxPortfolio” v-for=”item in data” v-
bind:key=”item.slug”>
<div class=”wrap-the-portfolio”
ref=”portfolioList”
:id=”item.slug”>
{item.slug}
</div>

//js
data() {
return {
idRoute: ‘’,
data: []
}
},
props: [‘id’],
watch: {
$route: function() {
if(this.$router.currentRoute.name==’UserPortfolioDetail’){
const paramsNow = this.$route.params.id;
console.log(this.$refs.portfolioList); // get the component
console.log(id); // can get the id
if(this.refs.portfolioList.id == id){
// do hide other $refs.portfolioList component
}
}
}
},

Solution :

You can not get id directly by using this.$refs. Since this.$refs.componentName will return a vue.js instance, it is not a HTML DOM structure. Instead, you can use v-if to show a specific DOM.

<div class=”wrap-the-portfolio”
v-if=”item.slug === id && $router.currentRoute.name !==’UserPortfolioDetail’”>
{item.slug}
</div>

[Vue.js] Property 'XXX' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

I created a vue.js component with TypeScript, and I’m getting this error in data() and in methods():

Property ‘xxx’ does not exist on type ‘CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>’.

For example:

33:18 Property ‘open’ does not exist on type ‘CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>’.
31 | methods: {
32 | toggle: function () {
\> 33 | this.open = !this.open
| ^
34 | if (this.open) {
35 | // Add click listener to whole page to close dropdown
36 | document.addEventListener(‘click’, this.close)

This error also shows any time this.close() is used.

This is the component:

<script lang=’ts’>
import vue.js from ‘vue’;
import axios from ‘axios’
export default Vue.extend({
data: function () {
return {
open: false
}
},
computed: {
profilePath: function () {
return “/user/“ + this.$store.state.profile.profile.user.id
}
},
methods: {
toggle: function () {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener(‘click’, this.close)
}
},
close: function () {
this.open = false;
document.removeEventListener(‘click’, this.close)
}
}
})
</script>

What is causing this error? It seems to still build in development with the errors, but they are causing issues when I deploy to production.

Solution :

You need to use function in the correct way to preserve the reference of this.

methods: {
toggle() {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener(‘click’, this.close)
}
},
close() {
this.open = false;
document.removeEventListener(‘click’, this.close)
}
}

Solution 2:

This seems to be inexplicably caused by using this.$store to compute the return value of profilePath, combined with the unspecified return type on its declaration.

One workaround is to specify the return type as string:

profilePath: function(): string {

verified with npm run serve and npm run build, using vue.js CLI 3.7.0 on macOS Mojave

[Vue.js] Trying to import firebase config into my vue file

Edit: error added ^^
!https://i.imgur.com/72x6LQX.png

firebase.js?5b23:11 Uncaught TypeError: app.database is not a function
at eval (firebase.js?5b23:11)
at Object../src/components/firebase/firebase.js (app.js:3496)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue:3)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue.js (app.js:2791)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (Getstarted.vue?5f4d:1)
at Object../src/components/front-end/Getstarted.vue.js (app.js:3552)

So i’m trying to put the firebase code in a different file other then the .vue.js file i use it in. It does work like supposed to if i put it in the vue.js file so no problems there. However i can’t seem to figure out on how to do that correctly.

<script>
import Firebase, { functions } from ‘firebase’
import conf from ‘../firebase/firebase’

let config = {
apiKey: ‘’
authDomain: ‘’
databaseURL: ‘’
projectId: ‘’
storageBucket: ‘’
messagingSenderId: ‘’
}

let app = Firebase.initializeApp(config)
let db = app.database()

let booksRef = db.ref(‘books’)
(dashboard.Vue)

*this is how it is in my vue.js file *

there is 2 javascript files
One with:

import config from ‘./firebaseConfig’

class Firebase {
constructor () {
firebase.initializeApp(config)
}
}

let db = app.database()

let booksRef = db.ref(‘books’)

export default Firebase()
(firebase.js)

and one with:

let config = {
apiKey: ‘’,
authDomain: ‘’,
databaseURL: ‘’,
projectId: ‘’,
storageBucket: ‘’,
messagingSenderId: ‘’,
appId: ‘’
}

export default (config)
(firebaseConfig.js)

My folder structure looks like this:

components
|firebase
||firebase.js
||firebaseConfig.js
|backend
||Dashboard.vue

When i load the webpage its just a blank page. Wondering how i can structure this correctly, if anything is unclear just let me know

Solution :

In below line, you have not declared variable app, so it’s undefined

let db = app.database()

You can change firebase.js to

import firebase from ‘firebase’
import config from ‘./firebaseConfig’

const app = firebase.initializeApp(config)
let db = app.database()

export default db

and from the component

import db from ‘./firebase.js’
let booksRef = db.ref(‘books’)

[Vue.js] VueJS get value from an axios promise

there is this code

Template :

<a href=”#” class=”video” @click.prevent=”checkVideo(subItem.id)” :id=”subItem.id” data-toggle=”modal” data-target=”#playerModal”>{subItem.name}<span>{getDuration(subItem.id)}</span></a>

VueJS Function :

async getDuration(id) {
var duration = ‘’;
await axios.post(‘/api/v1/checkvideo’, {
menu: id
})
.then(function (response) {
console.log(response.data[0].datas.duration)
return response.data[0].datas.duration;
});

//console.log(duration);
//return duration;
},

The problem is that the console.log show the values as expected but on the vue.js Rendering I get this [object Promise] to know how to show the values after the promise has been resolved.

Thanks for helping

Solution :

the code is return axios which is a promise object. If you want to return final duration. You should await axios promise and return the response.

async getDuration(id) {
var duration = ‘’;
const response = await axios.post(‘/api/v1/checkvideo’, {
menu: id
})
return response.data[0].datas.duration;
}

EDITED

Since async return a promise, [object Promise] will always be rendered on the screen. If you want to get duration on a specific id, I think this is correct to do.

data() {
return {
id: null, // Maybe you should store the value of `id` here
duration: null
}
},
mounted() {
this.getDuration(this.id)
},
methods: {
async getDuration(id) {
var duration = ‘’;
const response = await axios.post(‘/api/v1/checkvideo’, {
menu: id
})
this.duration = response.data[0].datas.duration;
}
}

[Vue.js] Is it ok if I share config data with all components from a js file?

there is config data, it will affect every component’s status at the same time.

So, I import that config object from the same js file, and use it in the component’s data.

Seems to be good, if I change the config from its origin, all components will change their view dynamically.

But, I can’t find this way in any other projects, which does not seem regular.

If I keep doing this, will any problems occur?

Config data:

export default {
status: {
name: ‘xxx’,
sex: ‘male’
}
}

All components:

import config from ‘./config’

data() {
return {
config
}
}

If I fire this method from any one of these components, all components would change:

methods: {
setUser() {
this.config.state.name = ‘yyy’
}
}

Thanks for reading.

Solution :

It differs as per project requirement. However, looking at the requirement, you need to access the data in every component rather than in some components. In this case, you may configure a middleware which will invoked in all components.

Using middleware will serve you benefit not to import the config in every components.

If you want to invoke them in some components only then you may configure mixins or plugins.

And providing answer for this seems to be a broad post. I hope you’d find useful resources to learn and use them. However, here’s a good read which will explain when to use component, mixins, and plugins:

component vs mixins vs plugins

Solution 2:

There isn’t any problem to use this way. But you could use vuex for state management and follow the redux pattern. .

[Vue.js] The render function in Vue component doesn't render the content

The code looks as following:

App.vue:

<template>
<div id=”app”>
<test-component-2 :ElementType = “‘div,red,25,div1’”>CCCC</test-component-2>
<hr>
<test-component-2 :ElementType = “‘h3,green,25,h3tag’”>DDDD</test-component-2>
</div>
</template>

<script>
import TestComponent2 from ‘./TestComponent2’;

export default {
components: {
TestComponent2
}
}
</script>

TestComponent2.vue:

<template>
<div>
This is TestComponent2
</div>
</template>

<script>
export default {
render: (createElement) => {
var a = this.ElementType.split(“,”);
return createElement(a[0], {
attrs: {
id: a[3],
style: “color: “ + a[1] + “;font-size: “ + a[2] + “;”
}
}, this.$slots.default)
},
props: {
ElementType: {
attributes: String,
required: true
}
}
}
</script>

When I run the application, “This is TestComponent2” is displayed only without “CCCC” and “DDDD”.

I know I can add “slot” tag in the template, but how to do it by using render function?

Solution :

Just don’t use arrow function syntax for the render function. The console says this is undefined if you do.

render: function(createElement) {
var a = this.ElementType.split(“,”);
return createElement(
a[0],
{
attrs: {
id: a[3],
style: “color: “ + a[1] + “;font-size: “ + a[2] + “;”
}
},
this.$slots.default
);
},

https://codesandbox.io/s/lxl9yok3r7

[Vue.js] material icons not importing in vue

there is following icons npm package installed.

“material-icons”: “^0.3.1”

there is imported them as following.

<style lang=”sass”>
$material-icons-font-path: ‘~material-icons/iconfont/‘;
@import ‘~material-icons/iconfont/material-icons.scss’;
</style>

and when using their classes as following.

<i class=”rotate_right”></i>

But icons are not showing up. there is created vue.js application using vue.js cli 3.

Solution :

As in document, you should use span with content is icon’s name. Please try

<span class=”material-icons”>rotate_right</span>