link1370 link1371 link1372 link1373 link1374 link1375 link1376 link1377 link1378 link1379 link1380 link1381 link1382 link1383 link1384 link1385 link1386 link1387 link1388 link1389 link1390 link1391 link1392 link1393 link1394 link1395 link1396 link1397 link1398 link1399 link1400 link1401 link1402 link1403 link1404 link1405 link1406 link1407 link1408 link1409 link1410 link1411 link1412 link1413 link1414 link1415 link1416 link1417 link1418 link1419 link1420 link1421 link1422 link1423 link1424 link1425 link1426 link1427 link1428 link1429 link1430 link1431 link1432 link1433 link1434 link1435 link1436 link1437 link1438 link1439 link1440 link1441 link1442 link1443 link1444 link1445 link1446 link1447 link1448 link1449 link1450 link1451 link1452 link1453 link1454 link1455 link1456 link1457 link1458 link1459 link1460 link1461 link1462 link1463 link1464 link1465 link1466 link1467 link1468 link1469 link1470 link1471 link1472 link1473 link1474 link1475 link1476 link1477 link1478 link1479 link1480 link1481 link1482 link1483 link1484 link1485 link1486 link1487 link1488 link1489 link1490 link1491 link1492 link1493 link1494 link1495 link1496 link1497 link1498 link1499 link1500 link1501 link1502 link1503 link1504 link1505 link1506

[Vue.js] Vue.js parent don't send updated data to child

I can’t update data in child from parent. Parent sends only initial data, but if I update data by function, then I fetch it from Back-end, nothing changed. I even made wacher, it works then data changed (write debug word in console) but still not sending updated data. How I should use dynamicly changed data to refresh child from parent data?

Parent:

<el-date-picker
v-model=”reportMonth”
type=”month”
format=”MMMM yyyy”
value-format=”yyyy-MM-dd”
placeholder=”Choose month”
@change=”generateReport”>
</el-date-picker>

<bar-chart :parent-data=”sendData”></bar-chart>

data() {
return {
monthData: null,
sendData: {
lowRiskPreliminary: 0,
midRiskPreliminary: 0,
highRiskPreliminary: 0,
inadmissibleRiskPreliminary: 0,
notValidPreliminary: 0
}

watch: {
monthData: function() {
console.log(‘data changed!’)
this.sendData = this.monthData
}
},
methods: {
generateReport() {
this.listLoading = true
getMonthlyReport(this.reportMonth).then(response => {
this.monthData = response.data }

Child:

<template>
<div :class=”className” :style=”{height:height,width:width}”></div>
</template>

export default {
props: {
className: {
type: String,
default: ‘chart’
},
width: {
type: String,
default: ‘100%’
},
height: {
type: String,
default: ‘300px’
},
parentData: {
type: Object,
default: undefined
}
},
data() {
return {
chart: null,
lowRisk: [this.parentData.lowRiskPreliminary],
midRisk: [this.parentData.midRiskPreliminary],
highRisk: [this.parentData.highRiskPreliminary],
inhRish: [this.parentData.inadmissibleRiskPreliminary],
notVal: [this.parentData.notValidPreliminary]
}
},
mounted() {
this.initChart()

methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({

Solution :

You have primitive value undefined as default for parentData, and you change it to object after updating parent variable. See more about reactivity in VueJS and caveats:
https://vuejs.org/v2/guide/reactivity.html

Use $nextTick:

watch: {
monthData: function() {
this.$nextTick(function () {
this.sendData = this.monthData
})
}
}

or use $emit, to emit event from parent:

watch: {
monthData: function() {

this.$emit(‘monthDataUpdated’, this.monthData);
}
}

and in child:

events: {
‘monthDataUpdated’ : function(data){
this.$nextTick(function () {
this.parentData = data;
});
},
}

Solution 2:

Print sendData in child template like this { sendData } and you should see it changes.

[Vue.js] Question about APIs with two frameworks using Laravel and Vue.js

when new to coding frameworks and integrating back-end to another front-end framework. can you please explain if I used these two frameworks will it result an RESTful api or just an API or another type of API? I’ll be honest i dont know how to use api or even restful api, so if I combine these two frameworks will it be a RESTful api or just API only? thank you please explain briefly. and how does it makes as an api ? i know postman uses GET, POST, DELETE but im not quite sure..\

so my main question is: is Laravel with Vue.js is an api?

Solution :

Is Laravel with Vue.js is an api?

The answer here is “IT DEPENDS” upon the use of Laravel in this Framework relationships.
Mainly, VueJS is used for frotend while Laravel is for backend.

In order for the Laravel to become a RESTful API is that, the endpoints (the URLs) must be stand-alone and secured in its own without doing a lot of configuration or stuff by the ones who want to use it. Secured — meaning it has a proper token mechanism to validate properly those who want to access the system / database.

A good example is:

STEP 1
Laravel could implement security such as Laravel Passport or using JWT Tokens

STEP 2
It should return or give with the proper credentials a “token” that would serve as additional security measure that you are LEGITIMATE to use our APIs

STEP 3
Whatever actions being done by those external parties, must be validated first, then authorize if they hold the correct token

STEP 4
Place all the routes inside the “routes/api.php” file, so all the routes will look like this localhost:8000/api/your-route

STEP 5
As for the endpoints (again, they’re the right term for the “routes” if their purpose is to be RESTful

Example code:
This code snippet’s goal is to delete an author

CONTROLLER
public function delete($author_id){

$author = Author::where(‘_id’, $author_id)
->first();

if($author && $author ->count() > 0){

$author->delete();

return response()->json([
‘message’ => ‘Successfully deleted the Author!’,
‘data’ => $author
], 200);
}
else{
return response()->json([
‘error’ => ‘Not Found’,
], 404);
}
}

ROUTE (routes/api.php) accessed through : localhost:8000/api/route

Route::group([‘middleware’ => [‘jwt.auth’] ], function() {
Route::delete(‘delete-author/{author_id}’, ‘AuthorController@delete’);
}

The middleware jwt.auth tells here that the authenticated user must hold the proper token before using the API, even though the user has the correct credentials, but doesn’t have the right token, would still be forbidden by the system

PLEASE NOTICE THE NUMBERS AFTER RETURNING THE DATA / ERROR MESSAGES
They are the HTTP responses to properly explain or tell the API users what is the problem or status of their request to the Backend app

[Vue.js] How can you hide or not show tabs if nothing is displayed for that specific tab in vue?

when very new to javascript and Vue. when trying to figure out how to ‘hide’ the tabs that do not contain any information but only showing the tabs that do. when not sure of the best way to go about this. If anyone could help I would greatly appreciate it.

I pull images automatically based on naming. If the files match this naming it then displays under the correct tab. I can either show all tabs or not show any. Not all of the bundles contain ‘all of the sizes’ so therefore I would like to just show the tabs that do match the criteria, hiding the ones that do not. This is also my first time ever submitting something through here as ‘ask a question’ so if when missing anything please let me know. thx

<script>

export default {
name: “Tab”,
data () {
return {
currentTab: 0,
tabs: null,
tabNames: [
{title: ‘tab one’, size: ‘one’},
{title: ‘tab two’, size: ‘two’},
{title: ‘tab three’, size: ‘three’},
{title: ‘tab four’, size: ‘four’},
{title: ‘tab five’, size: ‘five’},
{title: ‘tab 6’, size: ‘six’},
{title: ‘tab 7’, size: ‘seven’},
{title: ‘tab 8’, size: ‘eight’},
{title: ‘tab 9’, size: ‘nine’},
{title: ‘tab 10’, size: ‘ten’},
{title: ‘tab 11’, size: ‘11’},
],
show: false
}
},
props: {
files: {
type: Array,
default: () => []
},
},
methods: {
sizeImg(size) {
const bundleRE = new RegExp()
},
}
}
</script>
<style lang=”scss” scoped>
.thumbnail {
display: inline-block;
max-width: 100%; /* only this one important */
margin-bottom: 0rem;
margin-right: 1rem;
border: 0;
line-height: 0; }
</style>
<template>
<div>
<v-toolbar
color=”#212121”
dark
height=”80”
extension-height=”110”
tabs
\>
<template v-slot:extension >
<v-tabs
v-model=”tabs”
color=”#212121”
grow
\>
<v-tabs-slider color=”#a60808”></v-tabs-slider>
<v-tab
v-for=”(tab, index) in tabNames”
:key=”index”>
{ tab.title }
</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model=”tabs”>
<v-tab-item v-for=”(tab, index) in tabNames” :key=”index”>
<v-card flat>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
<v-card-text><img class=”thumbnail” v-for=”(i, n) in sizeImg(tab.size)” :key=”n” :src=’i’></v-card-text>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-tab-item>
</v-tabs-items>
</div>
</template>

Solution :

You can create a computed prop (called parsedTabs, for example) and delete those tabs you don’t want to show, like:

parsedTabs() {
return this.tabs.filter(tab => tab.size);
}

[Vue.js] Priority of Vue directives?

I used a form component of a Third Party Component Library, which hasn’t disabled props, and I bind a click event to every form item via @click to popup a dialog when the form item was clicked. But here is my problem, in some case the form item should not be clickable, so I create a custom prevent-click directive which like this:

const clickHandler = e => {
e.stopImmediatePropagation()
e.stopPropagation()
return false
}

const directive = {
bind(el, { value }) {
if (value) {
el.addEventListener(‘click’, clickHandler, true)
}
},
update(el, { value }) {
if (!value) {
el.removeEventListener(‘click’, clickHandler, true)
} else {
el.addEventListener(‘click’, clickHandler, true)
}
}
}

used like this:

<form-item v-prevent-click=”true” @click=”showDialog”></form-item>

The prevent-click directive do nothing but add a captured event listener to the form-item, which stop the propagation, everything goes well so far, but the problem is that the form-item has a pseudo child element which is added by css after selector. So when I clicked the pseudo child element, due to the pseudo child element itself doesn’t dispatch the click event instead of the form-item, so the form-item element will still dispatch the event, besides the vue.js builtin directive @click event handler was bound first, which result in the useCapture param of addEventListener method won’t effect.

In the 1.x version, there is priority option of custom directive, but the 2.X remove it. So are there anyway to make my custom directive bind before than the builtin @click?

Solution :

Consider passing a flag to showDialog. If you cannot modify showDialog function wrap it in another function:

// the compoennt template
<form-item @click=”wrappedShowDialog(true)”></form-item>

// Vue.js component
wrappedShowDialog(isAllowed) {
if (isAllowed) {
this.showDialog();
}
}

Solution 2:

You should use Vue’s built-in event modifiers (reference here). Try this:

<form-item @click.stop.prevent=”showDialog”></form-item>

I don’t know what the third-party components framework is, but if you really need to handle the preventDefault by yourselft, I suggest you to do the following:

Template

<form-item @click=”showDialog”></form-item>

Script

methods: {
showDialog(e) {
e.preventDefault();
// the code to display dialog…
}
}

If you also need to pass arguments to showDialog, remember that you can - just pass the event as first argument:

<form-item @click=”showDialog($event, urData)”></form-item>

[Vue.js] Call mixin function from asyncData() method of the page component with Nuxt.js

Can I call mixin function from asyncData() method of the page component with Nuxt.js?

My code:

<template>

</template>
<script>
import api from “@/plugins/api/api.js”

export default {

async asyncData(context) {

context.apiMethodName()

}


}


</script>

api.js

import vue.js from ‘vue’
import API from ‘@/assets/js/api’

Vue.mixin({
methods: {
apiMethodName() { … }
}
})

Solution :

You cant call vue.js methods from withing asyncData, because asyncData executed before vue.js have an instance.

You can extract method into simple js function and call it both in asyncData and the vue.js method, but keep in mind that in asyncData you wont be able to access vue.js instance properties and other methods

[Vue.js] Vuejs. E-Commerce & Shopping Cart

how to save using Vuejs elements in the Shopping Cart when the user get in the website even if he refreshs the page later ?

Is Vue-session the perfect tool for that ? Also, can you suggest me a good documentation for that ?
Thank you !

Solution :

There are two possible solutions. One is handled on client side and other on server side. I would recommend to go with sever side which is solution 2, so that even when user opens the cart later, they can still see the items they added in cart. Amazon gas similar behavior.

Solution 1(client side): You can save the shopping cart details in localStorage or sessionStorage depends on the need and fetch the data from there when redirected to cart page

Solution 2(server side): This is done with the help of Backend in the project. Everytime you add a item in cart, you should send that information to BE(backend) and whenever you come to cart page, you should ask BE about the cart details

[Vue.js] VueJs CLI 3 - how add external lib

there is a vue.js app created by latest vue.js CLI (vue.js 3.5.1) using this following command line:

vue.js ui

This is my folder structure:

app_vue:
|- node_modules
|- public
|- src:
|—- assets
|—- components:
|———List.vue
|—- libs:
|——— pagination:
|————- css:
|—————– pagination.css
|————- js:
|—————– pagination.js
| …

The libs folder doesn’t exist before I just created manually.

I also create manully vue.config.js file but I don’t know what I should add here.

const path = require(‘path’)
module.exports = {}

My List.vue:

<template>
<div>

<div id=”pagination”></div>
</div>
</template>
<script>
// how use pagination.js ???
export default {

}
</script>
<style>
//how use pagination.css ???

<..style>

use the pagination libs in List.vue.js component.
to use something like that:

libs/pagination/pagination.css

not

../../libs/pagination/pagination.css

How I can do it.

Solution :

If you want to use the files in just the components/views, you import what you want into the files that need them: import MyLib from “../path/to/libs”; is an example.

However, if you want something to be added globally, you can do add them in the App.vue.js (or the base vue.js component), in a non-scoped style tag:

<style>
@import “https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@import “https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons";

#app {
font-family: “Hilda-Regular”, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

The example above will expose all the styles to the entire application. If you put any styles in a scoped style tag, they will be scoped to that component or view.

Solution 2:

If you want to import this library and it is ES6 or other module then you might want to use chainWebpack option and define something like

module.exports = (api, options) => {
api.chainWebpack(webpackConfig => {
webpackConfig.resolve
.alias
.set(‘~’, api.resolve(‘lib’))
}
}

For more example you might want to look here

Solution 3:

The following solution works for me.

vue.config.js

const path = require(‘path’)

module.exports = {
chainWebpack: config => {
config.resolve.alias
.set(‘libs’, path.resolve(__dirname, ‘src/libs/‘))
}
}

List.vue

<script>
import { Pagination } from “libs/pagination/js/Pagination.js”
import ‘libs/pagination/css/pagination.css’

export default {

mounted()
{
console.log(new Pagination(“#pagination”))
}

}
</script>

[Vue.js] Import image with threejs in VueJS project

I followed threejs documentation in vuejs project to import image using :

texture.load( “./clouds” )

This code is not working, there is to import image using require :

texture.load( require( “./clouds.png” ) )

Now to use functions for sucess or error, so thank’s to the internet i found that

texture.load( require( “./clouds.png” ), this.onSuccess, this.onProgress, this.onError )

The problem is in success function, to create a cube with texture and nothing happened. I also tried on success function to add color in material but it didn’t work.

onSuccess( image ) {

this.material = new THREE.MeshLambertMaterial( {
color: 0xf3ffe2,
map: image
}

this.generateCube()
}

generateCube() {

let geometry = new THREE.BoxGeometry( 100, 100, 100 );

this.forme = new THREE.Mesh( geometry, this.material );
this.forme.position.z = -200
this.forme.position.x = -100
this.scene.add( this.forme );

},

Solution :

the problem is not related to VueJS /ThreeJs (again ^^), you should learn how to use this inside a callback, here is a E6 fix :

texture.load( require( “./clouds.png” ), t => this.onSuccess(t), e => this.onProgress(e), e => this.onError(e) )

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow\_functions

[Vue.js] Nuxt - How to find the previous route?

when able to use this.$router.go(-1) to redirect a user to the previous route. However, when not able to understand how I get get the information about the previous route before redirecting.

Basically, by first reading what the previous route was, to make sure that the previous route was from the same domain and only then redirect to it, otherwise do something else.

Solution :

There is no out of the box way to get this information.

What you can do is attach a beforeRouteEnter as a global guard and save the route before navigating to a new route.

Then you can check to see if there is a previous route saved and execute this.$router.go(-1)

If you are using the router in history mode you could be tempted to use the History api that vue-router is using to get this information. But HistoryApi doesn’t allow for this as this would be a huge privacy problem. You could see the entire history of the user in the current tab.

[Vue.js] VueJS transition slider

there is a form with three steps.
And each step should transition from side to side on click of prey/next.
The problem is, that the transitions aren’t being applied correctly after a direction change.
Does anyone know why vue.js isn’t adding the correct class to the displayed element after the change in direction?
there is been racking my head as to why can’t find a solution.

here’s a pen:
https://codepen.io/cjfradley/pen/YgvJxe

the transition blocks look like this:

<transition :name=”transition”>
<div class=”register__form-step” v-if=”step === 1”>
Step 1
<br>
<button @click.prevent=”next()”>Vorwrts</button>
</div>
</transition>

and the name of the transition is changed depending on which of the two buttons ‘prev’ or ‘next’ is clicked.
I was under the impression, that that would change the transition name for all transitions. But somehow the name lags behind one step.

Thanx for you the help

Chris

Solution :

The transition musst be applied before using it.

You could do that by waiting for the next Tick.

methods: {
prev () {
this.transition = “slide-prev”
Vue.nextTick(_ => {
this.step–
})
},
next () {
this.transition = “slide-next”
Vue.nextTick(_ => {
this.step++
})
},
}

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