link1644 link1645 link1646 link1647 link1648 link1649 link1650 link1651 link1652 link1653 link1654 link1655 link1656 link1657 link1658 link1659 link1660 link1661 link1662 link1663 link1664 link1665 link1666 link1667 link1668 link1669 link1670 link1671 link1672 link1673 link1674 link1675 link1676 link1677 link1678 link1679 link1680 link1681 link1682 link1683 link1684 link1685 link1686 link1687 link1688 link1689 link1690 link1691 link1692 link1693 link1694 link1695 link1696 link1697 link1698 link1699 link1700 link1701 link1702 link1703 link1704 link1705 link1706 link1707 link1708 link1709 link1710 link1711 link1712 link1713 link1714 link1715 link1716 link1717 link1718 link1719 link1720 link1721 link1722 link1723 link1724 link1725 link1726 link1727 link1728 link1729 link1730 link1731 link1732 link1733 link1734 link1735 link1736 link1737 link1738 link1739 link1740 link1741 link1742 link1743 link1744 link1745 link1746 link1747 link1748 link1749 link1750 link1751 link1752 link1753 link1754 link1755 link1756 link1757 link1758 link1759 link1760 link1761 link1762 link1763 link1764 link1765 link1766 link1767 link1768 link1769 link1770 link1771 link1772 link1773 link1774 link1775 link1776 link1777 link1778 link1779 link1780

[Vue.js] vuejs render <svg> tag on component

I’m looking for how to render to component on vuejs project.

I’m using https://github.com/juliuste/parliament-svg to create chart.

here is my code

created() {
let parties = {
linke: {
seats: 64,
colour: “#a08”
},
spd: {
seats: 193,
colour: “#e02”
},
gruene: {
seats: 63,
colour: “#0b2”
},
union: {
seats: 311,
colour: “#333”
}
};
const svg = parliamentSVG(parties, true);
var stringify = require(“virtual-dom-stringify”);
this.parliamentSVG = stringify(svg);
}

which return

<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”-20.487130703115444,-20.487130703115444,40.97426140623089,20.97426140623089”><circle cx=”-20” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.9766445366” cy=”-0.9662675905” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.9066326944” cy=”-1.9302784183” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.790127989” cy=”-2.8897809914” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.6274025228” cy=”-3.8425343471” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.4188363485” cy=”-4.7863132858” r=”0.38970456249235585” fill=”#a08” class=”linke”></circle><circle cx=”-19.1649165822” cy=”-5.718913568” r=”0.38970456249235585” fill=”#e02” class=”spd”></circle><circle cx=”-18.8662362652” cy=”-6.6381570626” r=”0.38970456249235585” fill=”#e02” class=”spd”></circle><circle cx=”-18.5234929792” cy=”-7.5418968338” r=”0.38970456249235585” fill=”#e02” class=”spd”></circle><circle cx=”-18.137487217” cy=”-8.4280221555” r=”0.38970456249235585” fill=”#e02” class=”spd”></circle><circle cx=”-17.7091205131” ….

in <div>{parliamentSVG}</div>

I’m looking the way to render as a graph.

Solution :

As stated in the documentation:

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive.

In the case:

<div v-html=”parliamentSVG”></div>

[Vue.js] Nativescript-vue native iOS Navigation button disappears after setting title on ActionBar

When I use just plain ActionBar:

<ActionBar/>

when I changing route with:

this.$navigateTo(Catalog)

the native ios Back button appears normally,
but when I change action-bar like this:

<ActionBar title=”some title”/>

or put other elements inside action-bar like this:

<ActionBar>
<NavigationButton text=”Go back” android.systemIcon=”ic_menu_back” @tap=”goBack” />
<ActionBar/>

the default native ios Back button disappearing.

What I need in the end is default ios action-bar with custom title and native ios back button that appears when I navigate between components. Please help, thanks in advance!

Solution :

I’m unable to reproduce the issue on my end, the NavigationButton is still visible when I use the exact code snippet above, tested with iOS v12.1.4. Please share the Playground sample if you still have the issue on the end.

However, you will not be able to modify the tap handler on iOS as mentioned in the docs.

In iOS, the back button is used explicitly for navigation. It
navigates to the previous page and you cannot handle the tap event to
override this behavior.

If you want to place a button on the left side of the ActionBar and
handle the tap event (e.g., show slide-out), you can use ActionItem
with ios.position=”left”.

[Vue.js] How to get data with form post method and navigate to next route with axios and vue js

there is a question about to search listing with vue.js and axios. My qouestion is how to get pass filter data after there is post to search listing with post method. So this is my part of components.

This is my search category code and my sidebar. Name: Sidebar.vue

<template>
<div class=”col-md-3 col-sm-4”>
<div class=”filter-sidebar”>
<div class=”col-md-12 form-title”>
<h2>Temukan aplikasi berdasarkan</h2>
</div>
<form id=”search” role=”form” class=”” @submit.stop.prevent=”searchCatForm” method=”post”>
<div class=”col-md-12 form-group category”>
<label class=”control-label” for=”category”>Kategori Aplikasi</label>
<select id=”category” name=”category” class=”form-control” v-model=”selectcategory.category”>
<option v-for=”category in categories” :key=”category.id” :value=”category.id”>{category.category_name}</option>
</select>
</div>
<div class=”col-md-12 form-group button”>
<button type=”submit” class=”btn tp-btn-primary tp-btn-lg btn-block”>Cari</button>
<router-link :to=”{name: ‘listings’}” class=”btn btn-reset”><i class=”fa fa-repeat”></i>Reset</router-link>
</div>
</form>
</div>
</div>
</template>

<script>
import axios from ‘axios’
import {API_BASE} from ‘../Config/config’

export default {
name: ‘Sidebar’,
data() {
return {
categories: [],
selectcategory: {}
}
},
created() {
let url = `${API_BASE}/listings`
axios.get(url)
.then(response => {
this.categories = response.data.categories
})
.catch(error => {
console.log(error)
})
},
methods: {
searchCatForm() {
let urlpost = `${API_BASE}/listings/search/filter`
console.log(‘submiting’)
axios.post(urlpost, this.selectcategory)
.then(response => {
this.$router.push({name: ‘searchlistingcategory’})
console.log(‘successfull’)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>

And this is my search result component and navigate after post. Name: SearchListingCategory.vue

<template>
<div>
<div class=”tp-page-head-search-listings”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12”>
<div class=”page-header”>
<h1>Pencarian Listing Berdasarkan Kategori</h1>
</div>
</div>
</div>
</div>
</div>
<div class=”tp-breadcrumb”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-8”>
<ol class=”breadcrumb”>
<li><router-link :to=”{name: ‘home’}”>Beranda</router-link></li>
<li class=”active”>Pencarian Listing</li>
</ol>
</div>
</div>
</div>
</div>
<div class=”main-container”>
<div class=”container”>
<div class=”row”>
<sidebar></sidebar>
<div class=”col-md-9 col-sm-8”>
<div class=”row”>
<div class=”col-md-4 vendor-box” style=”min-height:410px;”>
<div class=”vendor-image”>
<a href=””>
<img :src=”” class=”img-responsive”>
<img :src=”urllisting” class=”img-responsive”>
</a>
</div>
<div class=”vendor-detail”>
<div class=”caption”>
<h2>
<router-link :to=”{name: ‘singlelisting’, params: { listing_slug: listing.listing_slug, id: listing.id }” class=”title”>
{listing.title}
</router-link>
</h2>
<p class=”location center” style=”min-height:42px;”></p>
<p class=”location center” style=”min-height:42px;”></p>
<p align=”right”>
<span>
<i class=”fa fa-eye”></i>
</span>
</p>
</div>
<div class=”clearfix”></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from ‘axios’
import {API_BASE} from ‘../Config/config’
import Sidebar from ‘../Layouts/Sidebar.vue’

export default {
name: ‘Search-Category-Listing’,
components: {
Sidebar
},
data() {
return {
searchlistingcategory: {
filter: []
},
urllisting: ‘http://localhost:8000/upload/logo-default.png',
}
},
}
</script>

This is my route component

{
path: ‘/listings/search/filter’,
name: ‘searchlistingcategory’,
component: SearchListingCategory,
},

And this is results on browser vue.js devtools, if i post and choose category based on sidebar, example category id :3. :

Now, how and with what method i can get this data push all data results to searchlistingcategory component? Thank you

Solution :

Add a prop to Search-Category-Listing

export default {
name: ‘Search-Category-Listing’,
props: [‘listing’]
components: {
Sidebar
},
data() {
return {
searchlistingcategory: {
filter: []
},
urllisting: ‘http://localhost:8000/upload/logo-default.png',
}
},
}

and send the data when pushing to the route.

this.$router.push({name: ‘searchlistingcategory’, params: {listing: response.data.listings } })

You also need to change the route definition so params are pushed as props to the component

{
path: ‘/listings/search/filter’,
name: ‘searchlistingcategory’,
component: SearchListingCategory,
props: true
},

Note that when using props: true a route can only be navigated to using name and not by using path.

[Vue.js] Difference between npm run serve and npm run dev in vuejs

What is the difference between npm run serve and npm run dev in vuejs. Why should i use npm run serve command to run the project

Solution :

npm run serve basically is just saying “npm please run the command I defined under the name serve in package.json” the same happens with npm run dev.

Given this the commands can do the exact same thing, similar things, or very different things. Usually they are a shorthand for running a dev server on localhost, but its not a rule, only a convention.

So you’ll need to check in the package.json file and look for

“scripts”: {
“serve”: “[list of commands here]“,
“dev”: “[list of commands here]“
},

[Vue.js] Nativescript-vue doesn't work without --bundle option

Please, let me know what information I can provide to better help troubleshoot this issue. As of right now, I’ve been reading up on webpack, comparing my webpack.config.js file, and random searches into the Google void.

Earlier this morning, I was running my NativeScript-vue.js project as expected. Made some changes, saved, tested, wash, rinse repeat. Then I tried a build and I got the following error message:

Unable to apply changes on device: emulator-####. Error is: Nativescript-vue.js doesn’t work without –bundle option. Please specify –bundle option to the command and execute it again..

I’ve been making edits in one .vue.js file — there is not been tinkering with any other files, especially not configuration files.

What is causing this issue?
How can I resolve this issue?
Is there a more intelligent search I can do than pasting in the error message?

UPDATE:

As requested by @Estradiaz

I’ve been attempting to run the application with:
tns run android –bundle
(also tried with ios and got the same results)

I’ve built the project using both npm install and tns install

The only script there is in my package.json is:

“clean”: “rm -rf node_modules/* && rm -rf hooks/* && rm -rf platforms/* && rm webpack.config.js && rm package-lock.json”

(just to nuke everything if/when new assets are being added)

Running TNS version #5.2.4

The terminal’s output is:

Webpack compilation complete. Watching for file changes.
Webpack build done!
Unable to apply changes on device: emulator-5554. Error is: Nativescript-vue.js doesn’t work without –bundle option. Please specify –bundle option to the command and execute it again..

UPDATED UPDATE:

Estradiaz drops some great knowledge; however, my error was discovered to have come from when my nativescript-vue.js package updated to 2.1.0 from 2.0.2

Rolling back to 2.0.2 resolved my specific issue. Other devs have started to report similar issues: https://github.com/nativescript-vue/nativescript-vue/issues/454 and https://github.com/nativescript-vue/nativescript-vue/pull/361#issuecomment-474079850

Solution :

There was a broken release of nativescript-vue.js today (2.1.0), which caused the issue you were experiencing. We have released 2.2.0 with the fix, so please make sure you are running the latest version.

Solution 2:

Search the typo

the bugging history of code ;)

Without changes to the dev dependencies, the main reason for the “–bundle” error is the use of a non native element - e.g. Lable instead Label.

Following:

$ npm install -g @vue/cli @vue/cli-init
$ vue.js init nativescript-vue/vue-cli-template <project-name>
$ cd <project-name>
$
$ npm install
$ # or
$ yarn install
$
$ tns run android –bundle
$ # or
$ tns run ios –bundle

from: Quick Start

then - whilst running - make changes to ./app/components/App.vue:

<template>
<Page>
<ActionBar title=”Welcome to NativeScript-Vue!”/>
<GridLayout columns=”*“ rows=”*“>
<Label class=”message” :text=”msg” col=”0” row=”0”/>

</GridLayout>
</Page>
</template>

to (html: div):

<template>
<Page>
<ActionBar title=”Welcome to NativeScript-Vue!”/>
<GridLayout columns=”*“ rows=”*“>

<div id=”hello”></div>
</GridLayout>
</Page>
</template>

or to (typo : Lable instead Label):

<template>
<Page>
<ActionBar title=”Welcome to NativeScript-Vue!”/>
<GridLayout columns=”*“ rows=”*“>
<Lable class=”message” :text=”msg” col=”0” row=”0”/>

</GridLayout>
</Page>
</template>

one will recieve following error:

Webpack compilation complete. Watching for file changes. Webpack build
done!

Unable to apply changes on device: emulator-5554. Error is:
Nativescript-vue.js doesn’t work without –bundle option. Please specify
--bundle option to the command and execute it again..

Solution 3:

After some troubleshooting (and help from the tech lead), we tracked down that a new nativescript-vue.js package was released today (going from 2.0.2 to 2.1.0).

In that, “feature” #361 is: “show error when –bundle option is not provided”

I don’t know what this actually means in the scope of my project or how I was invoking the build or why it was breaking … but rolling back to 2.0.2 resolved my issue.

[Vue.js] laravel Route call loalhost api file on staging server

laravel route file
var apiUrl = “http://myipaddress/api";

after that when calling login api that its called localhost path :
http://localhost:8000/api

and it gives CORS error as below:

Failed to load http://localhost:8000/api/auth/login: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://myipaddress' is therefore not allowed access.

Is there any solutions for this?

Thanks in advance..

Solution :

I advise you to read up on CORS generally: https://developer.mozilla.org/de/docs/Web/HTTP/CORS

To solve the issue, you’d need to configure the webserver to allow that origin, by e.g. using this middleware: https://github.com/barryvdh/laravel-cors

See the Configuration part of the docs concerning allowedOrigins.

Kind regards

[Vue.js] How to use ThreeJS with VueJS

to use threeJS, so i install it with npm i three –save. I followed basic tutorial in threeJS documentation but i got an error.

mounted () {
this.initThree();
},
methods: {
initThree() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

this.renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( “background” ), alpha: true, antialias: true } );
this.renderer.setSize( window.innerWidth, window.innerHeight );

let geometry = new THREE.BoxGeometry( 1, 1, 1 );
let material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
this.cube = new THREE.Mesh( geometry, material );
this.scene.add( this.cube );

this.camera.position.z = 5;
this.animate()

},

animate() {

this.cube.rotation.x += 0.01;
this.renderer.render( this.scene, this.camera );
requestAnimationFrame( this.animate() );

}
}
}

Solution :

the problem is not related to VueJS /ThreeJs, you should simply fix this line :

requestAnimationFrame( this.animate() );

It should be :

requestAnimationFrame(this.animate)

Please read more about callback : https://developer.mozilla.org/en-US/docs/Glossary/Callback\_function

[Vue.js] ChartJS inside modal/popup window, chart displays 0px height

I’m trying to display a graph inside a modal window when a user clicks a button. The modal window is set to display: none; until the button is clicked, which then is set to display: flex;

I can take the chart outside of the modal, and it will work fine.

If I change the height of the chart (from 0px) in dev tools, the chart will appear.

there is created a codepen which demonstrates the problem. Just comment/un-comment the code inside/outside of the modal to see.

The code for the graph is something I took from another codepen example I found.

Another stackoverflow answer provided some help, however when struggling to implement the solution into my own code. This was the answer I found:

“It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.”

Solution :

So you’re looking for something like this , I suppose?

If you check out the Vue-chartJs docs you’ll see this (troubleshooting page):

If you are using the mixin you need to pass in the options as a prop names options. This is important because the mixin will call chart.js update() method or destroy and render a new chart. If the mixin renders a new chart it calls this.renderChart(this.chartData, this.options).

That means that the options need to be saved in the vue.js object. By doing this, when you call vue_object.update() , all the data/options are already in the object.

So, what I changed in the code:

Declared the Vue.component as a var aux;
Added the options to the vue.js object and called this.options in the renderChart()
Called aux.update() on the EventListener for the button.

Hope this helps you out! If you need anything else, you’re welcome to ask!

Note: Since the chart is very big, it might not be fully visible in the codepen!

[Vue.js] jwt-auth token has expired

when utilizing jwt-auth and vue-auth for my SPA. For testing purposes, there is the refreshData variable in the config file for vue-auth set to 1 for refreshing every minute. For the jwt-auth config file, there is the ttl set to 1 and the refresh_ttl set to 3.

when able to login and receive a token. I see it in the localStorage. Every minute for the first 3 minutes, I get a success for the refresh, and I see the token changing in localStorage, but the 4th time, I get an error.

{message: “Token has expired and can no longer be refreshed”,}
exception: “Tymon\JWTAuth\Exceptions\TokenExpiredException”

Why is this? Since when refreshing the token, I thought that the refresh_ttl wouldn’t even matter, but it certainly seems to be dictating this.

Solution :

in the AuthController try to change

$this->middleware(‘auth:api’, [‘except’ => [‘login’]]);

into

$this->middleware(‘auth:api’, [‘except’ => [‘login’, ‘refresh’]]);

Solution 2:

In the auth controller refresh function please to change:

return response()->json([
“success” => true,
“payload” => [
‘access_token’ => auth()->refresh(),
‘token_type’ => ‘bearer’,
‘expires_in’ => auth()->factory()->getTTL() * 60,
‘user’ => auth()->user()
]
]);

And you need to change the config/auth.php like this:

‘defaults’ => [
‘guard’ => ‘api’,
‘passwords’ => ‘users’,
],
‘guards’ => [
‘web’ => [
‘driver’ => ‘session’,
‘provider’ => ‘users’,
],
‘api’ => [
‘driver’ => ‘jwt’,
‘provider’ => ‘users’,
‘hash’ => false,
],
],

And here is a good example laravel-jwt-vuejs

Solution 3:

if you don’t want to expire the token thn in config jwt.php replace

‘ttl’ => env(‘JWT_TTL’, null),

‘required_claims’ => [
‘iss’,
‘iat’,
// ‘exp’,
‘nbf’,
‘sub’,
‘jti’,
],

then hit

php artisan config:cache

Solution 4:

You can set ttl to null, to yield a never expiring token.

‘ttl’ => env(‘JWT_TTL’, null),

or directly give in .env

[Vue.js] Get the active class name of a dynamic class in vue

there is this code for a card in vue:

<div id=”card” class=”card” :class=”{‘border-danger’: alertaCPU }” style=”max-width: 18rem;”>

I create 6 elements with this template and the border becomes red in the cases that the value gets over a limit. This is the code for the function:

alertaCPU: function() {
if (this.valor > this.limite ) {
this.audio.play();
console.log(“Playingg”);

return true;
}
return false;

}

I try to get the name of the class of the different elements :

document.getElementById(“card”).className

And all the time it returns all the name of the class without the dynamic condition.

card border-danger

Is possible to get the className that is been used at this moment?

Solution :

For this code :class=”{‘border-danger’: alertaCPU }”, class condition always returns true; alertaCPU is always truthy value since it is a function.

Vue.js class syntax expects a class object to be of the following type:

{ ‘class-name’: truthyValue }

Here you are just passing a function name which is always a truthy value. You must covert this function to getter like following:

computed: {
alertaCPU: function() {
if (this.valor > this.limite ) {
this.audio.play();
console.log(“Playingg”);

return true;
}
return false;

}
}

Second, the class “card” is statically bound to the DOM element and will always exists irrespective of the dynamically added class. What you can do here is to Regular Expression or .classList instead of .className property like:

document.getElementById(“card”).classList;

classList is basically an array of all the classes applied to that element. Read more about it here.