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] How can I load JSON config file and let the Vue app wait for this?

A typical scenario for me is:

a vue.js app (packed with webpack, BTW)
a separate config file for configuring the app

The config file should not be included in the webpacked deployment package, since it is server-dependent (database credentials etc.)

For some reason when not intending to elaborate on here I keep the config in a JSON file.

So the question is:

How can I delay “starting” the vue.js app until the JSON config file has been loaded (and parsed) from the backend?

I know how to load and parse, but the question for me is Vue-specific: what’s the best practice to “wait” for something before starting the whole thing?

(Is something like beforeCreate lifecycle hook in the App.vue.js component the way to go? Does it play nice with asynchronous tasks like loading a JSON file over the net?)

Solution :

One way that there is used to solve this kind of issue is to use the router.beforeEach. Here is an example of my code:

router.beforeEach(async (to, from, next) => {
if (!store.state.initialized) {
// the store initialize will set initialized to true
await store.dispatch(‘initialize’)
}
// if user not logged in or the route is not public
if (!store.state.user && !to.meta.public) {
next(‘/login’)
} else {
next();
}
});

[Vue.js] How do I displaying details of a PHP internal server error?

there is installed a PHP application onto a shared hosting web server. when getting a 500 Internal Server Error. I don’t seem to have access to any log files so I would like the error page to temporarily give details of the error.

I know how to do this in ASP.Net but when not that familiar with PHP.

Solution :

try:

error_reporting(E_ALL);
ini_set(‘display_errors’, ‘1’);

at the top of the file.

Solution 2:

If Jeremy Morgan’s solution doesn’t work, try creating the own log file using set_error_handler(). Usually some information about the state of the application ($GLOBALS and so on) can be enough information, but PHP will (at least try to) pass you all sorts of information about where the error occurred and what type of error it is.

Also, try using the “Divide And Conquer” method of debugging. Start with about half of the file, and then expand upward if it’s still crashing or downward if it runs umtil that point. If you don’t want to remove the code, either /* comment out */ the code to be cut, or use the __halt_compiler() special directive to have PHP ignore all remaining data in the file.

Finally, one thing that drove me mad trying to fix it is what’s called a Byte Order Mark. PHP was evaluating that BOM at the beginning of the file, causing it to send output, and causing problems while trying to send headers and the like. Probably not what the issue is, but knowledge worth having.

Solution 3:

I doubt you’re getting that error from PHP. On shared hosting it’s more likely that the application’s default .htaccess config is causing the error.

My guess would be a mod_rewrite without a RewriteBase set.

Solution 4:

look at the values in phpinfo(); to see if anything sticks out… put it somewhere in the code and it should display a bunch of php version information

Solution 5:

An “Internal Server Error” is not a PHP error (as the name says). Therefore, you either have to look at the server logs (which you do not have access to, as it seems) or you can’t do anything about it from PHP.

[Vue.js] Accessing props in child vue component data function?

there is the below child component. The props are updated from an input selector in the parent. Why does level: this.globalForm.level not update the child’s level

Parent:

<template>
<div>
<div class=”form-container”>
<select class=”form-control” v-model=”level”>
<option v-for=”level in options” v-bind:key=”level”>{ level }</option>
</select>
<button @click=”submit()”>Create</button>
</div>
<child v-bind:globalForm=”globalForm”/>
</div>
</template>

<script>
inputFiled;
export default {
data() {
return {
level: “”,
globalForm: {
level: “”
},
options: [“level1”, “level2”, “level3”]
};
},
components: {
child
},
methods: {
submit() {
this.globalForm.level = this.level;
}
},
watch: {
level() {
this.globalForm.level = this.level;
}
}
};
</script>

Child:

<template>
<div class=”form-container”>
<option v-for=”level in options” v-bind:key=”level”>{ level }</option>
</div>
</template>

<script>
export default {
props: { globalForm: Object },
data() {
return {
options: [“level1”,”level2”,”level3”,],
level: this.globalForm.level //this does not update the child’s level component
};
}
};
</script>

Solution :

TLDR

level should be a computed property on the child so that you can detect changes in the prop. You are setting level in the data function, so updates to the prop never make it to level.

Below you’ll find a minimal example on what I think you want to achieve.

Vue.config.productionTip = false;
Vue.component(‘parent’, {
template: `
<div class=”parent”>
<b>PARENT</b>
<div class=”form-container”>
<select class=”form-control” v-model=”level”>
<option v-for=”level in options” v-bind:key=”level”>{ level }</option>
</select>
<button @click=”submit()”>Create</button>
</div>
<child v-bind:globalForm=”globalForm”/>
</div>
`,
data: () => ({
level: “”,
globalForm: {
level: “”
},
options: [“level1”, “level2”, “level3”]
}),
methods: {
submit() {
this.globalForm.level = this.level;
}
}
});

Vue.component(‘child’, {
template: `
<div class=”form-container child”>
<p><b>Child</b></p>
Level: { level }
</div>
`,
props: {
globalForm: Object
},
computed: {
level() {
return this.globalForm.level;
}
}
});

new Vue({
el: “#app”
})
.parent {
background-color: darkgray;
padding: .5em;
border: solid 1px black;
}
.child {
background-color: lightgray;
padding: .5em;
border: solid 1px black;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<parent></parent>
</div>

More Detailed explanation

There are couple of errors on the code that I’ll go through.

In the child component

When initializing the component, this is not available inside the data function, so this.globalForm will be undefined. An error is thrown in the console when reproducing it.

data() {
return {
options: [“level1”,”level2”,”level3”,], // this looks like duplicated code from the parent
level: this.globalForm.level // throws error
};
}

To fix that error, you can get the vm context from the parameters of data But this is not the solution for the question.

data(vm) { // note vm
return {
level: vm.globalForm.level // note vm
};
}

The real problem is that level: this.globalForm.level runs only once, in the component initialization, so level is undefined. When the globalForm prop changes, level has already been initialized and it will not change (data returns a new object so the reference to the prop is lost).

You want convert level to be a computed property so that changes to the prop can be detected and the inner value returned. See code snippet above.

[Vue.js] Vuejs cache images from url, avoid re-fetching

I’m building a simple gallery + slideshow app.
In the gallery component there is all the urls and display them in a GalleryItem component.

<gallery-item v-for=”i in images” :item=”i” :key=”i.uid”/>

GalleryItem then uses

<img :src=”item.url”/>

to display the image.
If the user clicks on any GalleryItem it will be highlighted in a lightbox/slideshow component.

<lightbox :item=”highlightedItem”/>

which again uses

<img :src=”item.url”/>

I naively expected the browser to cache that request and not reload the exact same url, but that’s exactly what’s happening.

Is there any elegant way to avoid this and cache the image when loaded once?

Solution :

You can implement caching images with a service worker.

An example service worker library that you can use is Workbox.
With Workbox you can define a URL you want to cache and multiple different caching strategies. Similar to the following code example just replace the RegExp with one that fits the use case, for example using the image extensions.

If the images don’t change as in the same url always points to the same image, I would recommend you to use the cacheFirst strategy, as then you will not need to send a request to the server if the image is already in the cache.

workbox.routing.registerRoute(
new RegExp(‘/styles/‘),
new workbox.strategies.CacheFirst()
);

[Vue.js] How to show/hide each element in v-loop by click?

there is a table with fields who should be available for editing.
For example:

<tr v-for=”item in items”>
<td>
//show by default and hide when edit button clicked
<span>{item.value}</span>

//show by click on edit button
<b-input :value=”item.value”></b-input>
</td>

<td>
//edit button (show input field)
<span class=”icon is-small” v-on:click=””>
<i class=”fa fa-edit”></i>
</span>

//save button (call function with axios)
<span class=”icon is-small” v-on:click=””>
<i class=”fa fa-save”></i>
</span>

//loader (show until the axios request is complete)
<span class=”icon is-small”>
<i class=”fa fa-pulse fa-spinner”></i>
</span>
</td>
</tr>

When I click to edit button I should get the input field and save button instead edit button. When I click to save button, I should send axios request and show loader spinner until the axios request is complete.
And I need to be able to show all inputs at the same time. I mean if I click to the next field for editing, previous input should be showing too.
Any idea how to do this?

Solution :

If you can add some keys to items then you can do that :

<tr v-for=”item in items”>
<td>
//show by default and hide when edit button clicked
<span v-if=”!item.edit”>{item.value}</span>

//show by click on edit button
<b-input :value=”item.value” v-else></b-input>
</td>

<td>
//edit button (show input field)
<span class=”icon is-small” v-on:click=”handleEdit(item)” v-if=”!item.edit”>
<i class=”fa fa-edit”></i>
</span>

//save button (call function with axios)
<span class=”icon is-small” v-on:click=”handleSave(item)” v-else>
<i class=”fa fa-save”></i>
</span>

//loader (show until the axios request is complete)
<span class=”icon is-small” v-if=”item.loading”>
<i class=”fa fa-pulse fa-spinner”></i>
</span>
</td>
</tr>

export default {
data() {
return {
items:[
{
value: foo,
edit: false,
loading: false
},
{
value: bar,
edit: false,
loading: false
}
]
}
},
methods: {
handleEdit(item) {
item.edit = true
},
handleSave(item) {
item.edit = false
item.loading = true
axios.post(url, params)
.then(function(response) {
item.loading = false
})
.catch(function(error) {
item.loading = false
})
}
}
}

[Vue.js] Nativescript pass parameters to fired event

Im using nativescript vue. Trying to pass parameters to professional ui - raddataform fired events to prevent duplicating code.

https://docs.nativescript.org/ns-ui-api-reference/classes/raddataform#propertycommittedevent

Thats how looks my layout with raddataforms. You can see on every RadDataForm there is separate on event @propertyCommitted functions to fire.

<StackLayout>
<RadDataForm
:source=”aimTarget”
@propertyCommitted=”aimTargetCommitted”
:metadata=”aimTargetMetadata”>
</RadDataForm>
<RadDataForm
:source=”fasterAimHot”
@propertyCommitted=”fasterAimHotCommitted”
:metadata=”fasterAimHotMetadata”>
</RadDataForm>
<RadDataForm
:source=”runeAimerCrosshair”
@propertyCommitted=”runeAimerCrosshairCommitted”
:metadata=”runeAimerCrosshairMetadata”>
</RadDataForm>
</StackLayout>

and for every this event there is a method which one looks like this.

attackMonstersCommitted (data) {

let edited = data.object.editedObject; // it has to be performed to update radDataForm with new value object
let tab = “attackerTab”; // to know which tab to edit
let name = “attackMonsters”;
let property = data.object.getPropertyByName(data.propertyName);

console.dir(“valueCandidate - “ + property.name);
this.$store.commit(‘updateRadData’, { edited , tab, name } ) // update raddataform

this.$update.propertyCommitted();

},

So there are 4 RadDataforms and 4 methods for every one. Is there possibility to pass parameters, something like this.

<RadDataForm
:source=”aimTarget”
myParameter1=”PARAM1”
@propertyCommitted=”aimTargetCommitted”
:metadata=”aimTargetMetadata”>
</RadDataForm>

or smething like this

<RadDataForm
:source=”aimTarget”
@propertyCommitted=”aimTargetCommitted(PARAM1,PARAM2)”
:metadata=”aimTargetMetadata”>
</RadDataForm>

and then in method somehow get value of this parameters ?
Then I will be able to use one method for all raddataforms

Solution :

You can pass extra parameters along with event data,

<RadDataForm
:source=”aimTarget”
@propertyCommitted=”aimTargetCommitted($event, ‘param1’, ‘param2’)”
:metadata=”aimTargetMetadata”>
</RadDataForm>

Where $event represents the default event objet.

[Vue.js] Vue components - recursive rendering or what is the problem here?

I’m trying to make a new vue.js app with 2 components but the components don’t render.
The error is - “Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.”
I read quite a bit on the problem but could not identify the problems in the code unlike with others’ codes.

Seems OK to me, not the first app with components I’ve written :/

App:

require(‘../../lib/jquery.event.drag-2.2/jquery.event.drag-2.2’);
require(‘../../lib/jquery.event.drag-2.2/jquery.event.drag.live-2.2’);
require(‘../../lib/jquery.event.drop-2.2/jquery.event.drop-2.2’);
require(‘../../lib/jquery.event.drop-2.2/jquery.event.drop.live-2.2’);

import vue.js from ‘vue’;
import Axios from ‘axios’;
Vue.prototype.$http = Axios;

import tournamentCourtManager from
‘../../components/tournament/courtManager/courtManager’;
import tournamentScheduleButton from
‘../../components/tournament/tournamentScheduleButton’;
import { store } from “../../store/store”;

new Vue({
el: ‘#tournamentMatchSettingsApp’,
store,
components: { ‘tournamentCourtManager’ : tournamentCourtManager,
‘tournamentScheduleButton’ : tournamentScheduleButton }
});

tournamentCourtManager:

<template>
<button type=”submit” class=”btn btn-info”>
dadada
</button>

<script>
export default {
name: ‘tournamentScheduleButton’,
data() {
return {}
},
mounted: function mounted() {
},
methods: {

}
}
</script>

courtManager:

<template>
<div id=”tournamentCourtManager”>
..
</div>
</template>

courtManager JS:

export default {
name: ‘tournamentCourtManager’,
components: {
‘match-cell’: matchCell
},
data() {
return {

};
},
….
}

And the code that prompts the error -

<tournamentschedulebutton></tournamentschedulebutton>
<tournamentcourtmanager></tournamentcourtmanager>

Solution :

Because you have named the components like ‘tournamentCourtManager’ in the components object, they must be named like <tournament-court-manager> in the template.

[Vue.js] Vue js searching array

when trying to search an array for query string on a json object. The returned fields are an array of filtered results. Currently, the list is returning the name field but not the number field.

computed: {
search: function () {
let self = this
let filtered = []

filtered = self.jcontacts.filter(function(contact){
return contact.firstname.toLowerCase().indexOf(self.query.toLowerCase())>=0 ||
contact.lastname.toLowerCase().indexOf(self.query.toLowerCase())>=0;
contact.email.toLowerCase().indexOf(self.query.toLowerCase()) >=0 ||
contact.phonenumber.toLowerCase().indexOf(self.query.toLowerCase()) >=0;
}
);
return this.contacts = filtered
}
},
}

The filtered method in the search method is not showing the number. An example of the json is below:

[
{
“id”: 1,
“phoneNumber”: [
“3908902”
],
“email”: [
jamie@fox.com
],
“firstname”: “Jamie”,
“lastname”: “Fox”
}]

Solution :

Beware of case phoneNumber != phonenumber
phoneNumber is stored as array not string, so you cant look for it like that (use .includes() function for example)
For code formatting consider to store self.query.toLowerCase() as variable or another computed property

Solution 2:

It is a typo. Check out field phoneNumber is filtered as phonenumber.

It is an array so you can do it as,

contact.phoneNumber.forEach( number => {
if(number.toLowerCase().indexOf(self.query.toLowerCase()) >=0)
return true;
});

I think similarly you can write it down for email as well because it is also an array.

[Vue.js] Vue js binding variable in img src

to get the variable value in the img src

The img path is correct there is tried without the variable that works fine.

<img v-if=”card.show” :src=”‘../../src/assets/kaarten/‘ + card.img + ‘.png’”>

I doent really get errors but it doesnt show the img.

Solution :

Have you tried referencing the assets directory relatively?

Like so:

<img :src=”‘@/assets/kaarten/‘ + card.img + ‘.png’”/>

Also, the card.show variable is true, isn’t it?

[Vue.js] Vuetify - How to disable v-form input elements

there is been trying and investigating about disabling the form by default.

<v-form ref=”form” v-model=”valid” lazy-validation>
<v-select v-model=”test” :items=”data” :disabled=”status”></v- select>
<v-text-field v-model=”name” :disabled=”status”></v-text-field>
</v-form>

I don’t see any disable prop to the v-form. So when just adding disabled prop to each and every input field to solve this problem. Like Angular adding disable prop to <fieldset> tag or to the form looks simple, is there any thing available in vuetify? any other approach to do this?

Solution :

there is looked into this my self, made my own form that extends VForm and tried making a disabled directive for it (v-disabled=”isDisabled”).

Unfortunately at the moment without the knowledge and time to extend all of the components and buttons in question, what you are currently doing is the only way or else you get the mutating prop warning on setting disabled directly with an iterator and trying to set isDisabled will throw an “has no setter method error”.

Vuetify needs to update the input and button components to allow pragmatic changes to the disabled property.

Having to set :disabled on each element isn’t really that drastic but yes I agree that from the parent form it would be nice to have.