link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] Invalid string length at repeat (VueJS)

I’m having the Error in execution of function repeat$1 while compiling a very simple VueJS template. This error prevents the app from compiling.

Can’t wrap my head against what’s wrong whit the template.

Here’s the code:
(I replaced parts of the template that consisted solely on text with the word “text”.)

<template>
<div class=”container”>
<div class=”row”>
<div class=”col-lg-10 mx-auto” v-if=”showPrivacyDisclaimer”>
<div class=”card mt-4”>
<div class=”card-body”>
<div class=”card-title”>
text
</div>

<p>
<b>text</b>
</p>
<p>
text.
</p>
<p>
text
</p>

<div class=”text-sm”>
<a @click=”details = true” style=”text-decoration: underline”>
Leer ms: Qu datos recopilamos?
</a>

<p v-if=”details”>
text
</p>

<br>

<a @click=”rights = true” style=”text-decoration: underline”>
Leer ms: Cmo ejercer tus derechos sobre estos datos?
</a>

<p v-if=”rights”>
text
</p>
</div>

</div>
<div class=”card-footer”>
<button type=”button”
class=”btn btn-primary”
@click=”continue()”>
Aceptar y continuar
</button>
</div>
</div>

<img :src=”baseUrl + ‘/public/img/eks-logo.svg’”
class=”mt-4” style=”max-width: 10rem”>

<p class=”text-muted mt-4 text-sm”>
text
<br>
more text
</p>
</div>
</div>
</div>
</template>

<script>
export default {
name: ‘Home’,
data() {
return {
baseUrl: process.env.VUE_APP_PHP_BASE_URL,
showPrivacyDisclaimer: false,
details: false,
rights: false,
}
},
mounted()
{
let hasPrivacyAccepted = window.localStorage.getItem(‘pda’);
if (!hasPrivacyAccepted) {
this.showPrivacyDisclaimer = true;
} else {
this.continue();
}
},
methods: {
continue()
{
window.localStorage.setItem(‘pda’, 1);

this.$router.replace({
path: ‘/encuesta/‘ + this.$route.query.e,
query: this.$route.query
})
}
}
}
</script>

If I completely remove everything between the <template> tags (except the first div that is required), the app starts compiling again.

there is tried progressively deleting parts of the template that use vue.js directives (v-if, etc.). But this didn’t made the app compile :(

Please help!

Update: I forgot to mention I’ve already tried deleting and re-installing node_modules

Update 2: I found the source of the bug. continue is a reserved JS word.

Solution :

You can’t use @click=”continue()”

This is a reserved word for javascript.

You can see the full list here :

https://www.w3schools.com/js/js\_reserved.asp

Solution 2:

Update: I started refactoring the template in two views and a more descriptive error message pop’d-up.

The error was that I was using a JavaScript reserved word as a method name (continue is a reserved word).

[Vue.js] Is it possible to create a multi-line header in a Vuetify datatable?

I would like to create a table with a multiline header, like in this example.

I’ve found this post, however the answer does not work. Furthermore, there is looked at the Vuetify documentation and Github issues, but there seems to be no solution.

Would be great if someone could let me know whether something like this is possible and if so how.

Solution :

You can probably use slot=”headerCell”. Note that the version of Vuetify used here is 1.5.11

Here’s a sample that might give you some pointers:

<v-data-table
v-bind:headers=”headers”
v-bind:items=”items”
v-bind:search=”search”
v-bind:pagination.sync=”pagination”
hide-actions
class=”elevation-1”
\>
<template slot=”headerCell” scope=”props”>
<div slot=”activator”>
{ props.header.text }
</div>
<div>
<span>A</span>
<span>||</span>
<span>B</span>
</div>
</template>
<template slot=”items” scope=”props”>
…..
</template>
</v-data-table>

Here’s the codepen link : https://codepen.io/nizantz/pen/KYyLOp

Hope it helps the case.

(Note to moderator who deleted my earlier post: I accidentally posted the answer to a wrong question and I already deleted it.)

Solution 2:

Here’s another sample that might help the case, based on the comment
Note that the data structure needs to be in the right format.(Child elements)

Vue-Template :

<div id=”app”>
<v-data-table
:headers=”headersTop”
:items=”tableitems”
hide-actions
\>
<template slot=”items” scope=”props”>
<td>
<v-data-table
:headers=”[{text:’First Name’, value:’fname’, sortable:false},
{text:’Last Name’, value:’lname’, sortable:false}
]“
:items=”props.item.name”
hide-actions
\>
<template slot=”items” scope=”props”>
<td>{props.item.fname}</td>
<td>{props.item.lname}</td>
</template>
</v-data-table>
</td>
<td>
<v-data-table
:headers=”[{text:’Country’, value:’country’, sortable:false},
{text:’City’, value:’city’, sortable:false}
]“
:items=”props.item.geo”
hide-actions
\>
<template slot=”items” scope=”props”>
<td>{props.item.country}</td>
<td>{props.item.city}</td>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</div>

Script:

new Vue({
el: ‘#app’,
data () {
return {
pagination: {},
headersTop:[
{
text: ‘Name’,
value: ‘name’,
sortable: false,
},
{
text: ‘Geo’,
value: ‘geo’,
sortable: false,
}
],
tableitems:[{
name: [{
fname: ‘Dakota’,
lname: ‘Rice’
},
{
fname: ‘Minerva’,
lname: ‘Hooper’
}],
geo: [{
country: ‘Niger’,
city: ‘Oud-Tunrhout’,
},
{
country: ‘Curaao’,
city: ‘Sinaai-Waas’,
}]
}]
}
}
})

Heres’s the codepen link : https://codepen.io/nizantz/pen/rbpNrY

[Vue.js] Vuetify navigation drawer keeps showing itself whenever refresh the page

I’m trying to build a navigation drawer for my page using Vuetify. And the navigation drawer keeps showing itself whenever I refresh my page or occurs at the start of the page. Is it possible to disable it?

``https://codepen.io/yuisnow/pen/bJYzvz

I’m expecting the navigation drawer should be hidden in any case. Only shows when the user clicks the hamburger menu button but the navigation drawer keeps showing itself when I refresh my page.

Solution :

Remove the quotation marks from ‘false’ in the JS.

new Vue({
el: ‘#app’,
data () {
return {
sideNav: null,
}
},
created () {
this.sideNav=false;
}
})

Solution 2:

Just remove crated hook
problem solved,
previously on the created hook you already have a value “this.sideNav=false;”
on it so it is a valid sideNav value and so drawer is activated

[Vue.js] Using splice() to remove items that matches condition from array

Im trying to via a for-loop remove all the items that matches a condition in the state array. But it seems to only be removing the last items in the array and not the ones that matches. Am I using the .splice() incorrectly? Thanks in advance. Code is:

rmTravel() {
for(var i = 0; i < this.cards.length; i++){
if(this.cards[i].sg_categories.includes(“travel”)){
this.cards.splice(i, 1);
console.log(‘Removed following card:’, this.cards[i].slug)
}
}
console.log(‘Cards in cards state: ‘, this.cards)
}

Solution :

This is a bit of a classic problem; you’re iterating forward and shrinking the array at the same time so you’re going to end up skipping over records.

I suggest using Array.prototype.filter() instead

this.cards = this.cards.filter(({ sg_categories }) =>
!sg_categories.includes(‘travel’))

This will reduce the array to entries who’s sg_categories property does not include “travel”.

[Vue.js] Can I use a PHP (laravel) controller directly inside my VueJS view?

I added a searchbar with results with VueJS, and this works great with a simple query. Now, I would like to do the same but with more complex filters.

Here is my VueJS search component

<button class=”btn btn-primary” @click=”search” @keyup.enter=”search” type=”button”>Search</button>

methods: {
search() {
axios.get(‘/races/find?q=%’+ this.query+’%’).then(
response => {
this.races=response.data;
}
);
}
}

in web.php

Route::get(‘/race/find’, ‘RacesController@searchRaces’);

in RacesController

public function searchRaces(Request $request)
{
return DB::connection(‘mysql1’)->select(REQUEST);
}

This works great.

Now I will have some more complex filters, with dates, sliders, multiple data. So i can’t pass it directly in my query, or I would have a super long request with 15 values…
Is it possible to call directly my Laravel controller in my vue.js view?

Thanks a lot in advance

Solution :

You can’t. Controller’s methods need to be called via HTTP. Complex filters, like dates, etc. are typical, so don’t worry about it. Change you query to post, and assign data to it:

search() {
let filters = {
query: this.query,
date: this.date,
// …
};
axios.post(‘/races/find’, filters).then(
response => {
this.races=response.data;
}
);
}

routes in web.php:

Route::post(‘/race/find’, ‘RacesController@searchRaces’);

[Vue.js] Unable to display Real Time Data, While doing so Python Web App is Generating Error Internal Server Error

Application is receiving data in real time (checked using alert) while to display it on the card, it gives error Internal Server Error

Same Code is running well as an independent html page but not in flask python web app.

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml">
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity=”sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ”
crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm”
crossorigin=”anonymous”>
<title>Cosmos DB Change Feed</title>
<style>

.fade-enter-active {
transition: all 1.5s ease;
}

.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
Welcome new
<div class=”container” id=”app”>
<div class=”row”>
<div v-for=”flight in flights” class=”col-md-6 col-lg-4 col-xl-3” style=”margin: 16px 0px;”>
<div class=”card”>
<div class=”card-body”>
<h4 class=”card-title”>{ flight.from } <i class=”fas fa-plane”></i> { flight.to }</h4>
<transition name=”fade” mode=”out-in”>
<h4 class=”card-subtitle mb-2” :key=”flight.price”>${ flight.price }</h4>
</transition>
</div>

</div>
</div>
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src=”https://unpkg.com/@aspnet/signalr@1.0.2/dist/browser/signalr.js"></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

const apiBaseUrl = ‘http://localhost:7071'
const axiosConfig = {}
const data = {
flights: []
}
const app = new Vue({
el: ‘#app’,
data: data
})
getFlights().then(function (flights) {
flights.forEach(flightUpdated)
}).then(getConnectionInfo).then(function (info) {
let accessToken = info.accessToken
const options = {
accessTokenFactory: function () {
if (accessToken) {
const _accessToken = accessToken
accessToken = null
return _accessToken
} else {
return getConnectionInfo().then(function (info) {
return info.accessToken
})
}
}
}

const connection = new signalR.HubConnectionBuilder()
.withUrl(info.url, options)
.build()

connection.on(‘flightUpdated’, flightUpdated)

connection.onclose(function () {
console.log(‘disconnected’)
setTimeout(function () { startConnection(connection) }, 2000)
})
startConnection(connection)

}).catch(console.error)

function startConnection(connection) {
console.log(‘connecting…’)
connection.start()
.then(function () { console.log(‘connected!’) })
.catch(function (err) {
console.error(err)
setTimeout(function () { startConnection(connection) }, 2000)
})
}

function getFlights() {
return axios.post(`${apiBaseUrl}/api/GetFlights`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}

function getConnectionInfo() {
return axios.post(`${apiBaseUrl}/api/SignalRInfo`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}

function flightUpdated(updatedFlight) {
const flight = data.flights.find(f => (f.to === updatedFlight.to && f.from === updatedFlight.from))
//const flight = data.flights.find(f =>f.id === updatedFlight.id)
if (flight) {
// alert(updatedFlight.price);
//Vue.set(flight, ‘from’, updatedFlight.from)
// Vue.set(flight, ‘to’, updatedFlight.to)
Vue.set(flight, ‘price’, updatedFlight.price)
} else {
// alert(updatedFlight.price);
data.flights.push(updatedFlight)
}
}
</script>
</body>
</html>

Expected Result is flight details (from, to , price) in the card format. I believe it is due to {flight.to} syntax, I don’t know how to replace it.

Solution :

If the application is giving an internal server error, you’re probably running it in production mode.
On the development machine,
If you’re using app.run to the app, change

app.run()

to

app.run(debug=True)

However, if you’re using

flask run

Then, depending on the system, you’ll need to add an environment variable, information about it is very nicely explained with other configurations.

Flask Environment Configuration

When you enable the debug mode, the inbuilt debugger will tell you exactly where it ran into a problem.

[Vue.js] How Can I use colon ( ) with vue Router

My url re-updating after the push
to make this url:

www.abc.com/istanbul-taksim-otelleri?checkin=2019-05-08&checkout=2019-05-16&filters=meal\_types:full,half,etc;stars:1,2,4

const query = {
checkin: ‘2019-05-08’,
checkout: ‘2019-05-16’,
filters:’meal_types:full,half,etc;stars:1,2,4’
}
this.router.push({query})

after this gettin like this

www.abc.com/istanbul-taksim-otelleri?checkin=2019-05-08&checkout=2019-05-16&filters=meal\_types%3Afull,half,etc%3Bstars%3A1,2,4

do you have any idea ? how can fix it ?

Solution :

See https://w3schools.com/tags/ref\_urlencode.asp - %3A is just a URL-encoded colon. URL-encoding Strings is standard practice, and in most cases required in order to make a valid URL.

If you need to decode a URL, something like decodeURIComponent() could work for you, e.g.:

const uri = ‘www.example.com/:";\[\]}'

const encodedURI = encodeURIComponent(uri)
console.log(encodedURI)

const decodedURI = decodeURIComponent(encodedURI)
console.log(decodedURI)

[Vue.js] Vue slot activator during tooltip is re-rendering my v-icon

when trying to put a tooltip on a v-icon who randomly gets assigned a color. Every time I mouse over the v-icon, the color changes. I only want the color to be set one time. I do not want the color to change every time the mouse is hovered over the v-icon. Any suggestions?

<v-tooltip bottom>
<template #activator=”{on}”>
<v-icon v-on=”on” :color=”getRandomColor()”>mdi-close</v-icon>
</template>
<span>Some Tooltip text</span>
</v-tooltip>

Solution :

I got around this by making a color array in the data: section of vue.js and generating the random colors there. Then, I just call that specific array index in color. Something like this:

data() {
return {
rColors: [getRandomColor(), getRandomColor()],
}
}
<v-icon v-on=”on” :color=”rColors[0]“>mdi-close</v-icon>

Is there a way to avoid doing this by putting a keyword in the previous code?

Something like

v-on:once=”on” ?

[Vue.js] How in VUE.js transfer this expression **newCat = $event.target.value** from **input** to **methods**?

How in VUE.js make transfer of this expression newCat = $event.target.value from input to methods, leaving only newCat in the input. And use it then in vuex. Like this @input=”newCat”

<f7-list form>
<f7-list-input
:value=”newCat”
@input=”newCat = $event.target.value”
type=”text”
placeholder=”some item”
\></f7-list-input>
<f7-button fill color=”blue” @click=”addCat”>Add some</f7-button>
</f7-list>

data() {
return{
cats:[],
newCat: null
}
},
mounted() {
if (localStorage.getItem(‘cats’)) {
try {
this.cats = JSON.parse(localStorage.getItem(‘cats’));
} catch(e) {
localStorage.removeItem(‘cats’);
}
}
},
methods: {
addCat() {
if (!this.newCat) {
return;
}
this.cats.push(this.newCat);
this.newCat = ‘’;
this.saveCats();
},
removeCat(x) {
this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
const parsed = JSON.stringify(this.cats);
localStorage.setItem(‘cats’, parsed);
}
}
}

Solution :

Try this:

<template>
<f7-list form>
<f7-list-input
:value=”newCat”
@input=”newCatOnInput”
type=”text”
placeholder=”some item”
\></f7-list-input>
<f7-button fill color=”blue” @click=”addCat”>Add some</f7-button>
</f7-list>
</template>

<script>
export default {
data() {
return{
cats:[],
newCat: null
};
},
mounted() {
if (localStorage.getItem(‘cats’)) {
try {
this.cats = JSON.parse(localStorage.getItem(‘cats’));
} catch(e) {
localStorage.removeItem(‘cats’);
}
}
},
methods: {
addCat() {
if (!this.newCat) {
return;
}
this.cats.push(this.newCat);
this.newCat = ‘’;
this.saveCats();
},
removeCat(x) {
this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
const parsed = JSON.stringify(this.cats);
localStorage.setItem(‘cats’, parsed);
},
newCatOnInput(e) {
this.newCat = e.target.value;
}
}
}
</script>

[Vue.js] Retrive all data to select option list

to Retrieve all data from API Through using vue.js Form and Axios. but it cannot be retrieved right now. Maybe i missed something. In this case to retrieve Brand of car, when one brand is selected in other select option it will change the series list base on chosen brand. Need the help.

here’s the code for vue.js

<div class=”form-group”>
<label>Merek</label>
<select class=”select-dropdown-no-search form-control” v-model=”merk” @change=”listSeri()” name=”merek” id=”merek”>
<option value=””>–Pilih–</option>
<option v-for=’data in merks’ :value=’data.MerkId’>{ data.MerkName }</option>
</select>
</div>

<div class=”col-sm-6”>
<div class=”form-group”>
<label>Seri</label>
<select class=”select-dropdown-no-search form-control” v-model=”seri” @change=”listSilinder()” name=”seri” id=”seri”>
<option value=””>–Pilih–</option>
<option v-for=’data in series’ :value=’data.MerkId’>{ data.MerkName }</option>
</select>
</div>
</div>

here’s the code for the vue.js

import axios from ‘axios’;
import API from ‘../API’;

var urlAddStock = API.url.host + ‘/addstock’;
var urlMerkList = API.url.host + ‘/merk’;
var urlSeriList = API.url.host + ‘/seri’;
var urlSilinderList = API.url.host + ‘/silinder’;
var urlTipeList = API.url.host + ‘/tipe’;

//Vue.component(‘v-select’, VueSelect.VueSelect);
var inputMobile = {
init: function() {
this.vueConfig();
API.auth();
},
vueConfig: function() {
var app = new Vue({
el: ‘#app’,
data: {
stockSubmit: false,

merk: “”,
merks: [],

seri: “”,
series: [],
access_token: “”
},
methods: {
submitStock: function() {
let self = this;
this.stockSubmit = true;
axios({
method: ‘post’,
url: urlAddStock,
data: {
MerkId: this.merk,
merk: “”,
SeriId: this.seri,
seri: “”,

access_token: localStorage.getItem(“token”)
}
}).then(res => {
console.log(res.data);

if (res.data.message === “Berhasil Menambahkan Data”) {
self.stockSubmit = false;
} else {
self.stockSubmit = false;
}

}, err => {
console.log(err);
self.stockSubmit = false;
});
},
listMerk: function() {
let self = this;
axios({
method: ‘post’,
url: urlMerkList,
data: {
itemid: 6,
access_token: localStorage.getItem(“token”)
}
}).then(response => {
console.log(response.data);
if (response.data.message === “Berhasil Mengambil Data Merk”) {
this.merks = response.data;

}

}, err => {
console.log(err);

});

},
listSeri: function() {
let self = this;
axios({
method: ‘post’,
url: urlSeriList,
data: {
merkid: this.merk,
access_token: localStorage.getItem(“token”)
}
}).then(res => {
console.log(res.data);
if (res.data.message === “Berhasil Mengambil Data Seri”) {
this.series = response.data;
}

}, err => {
console.log(err);

});

}
}
})
}
}

Solution :

You need to assign new Array reference in this.series. Try changing this:

if(res.data.message === “Berhasil Mengambil Data Seri”){
// assign new array reference using ‘spread operator’
this.series = […response.data];
}