link2329 link2330 link2331 link2332 link2333 link2334 link2335 link2336 link2337 link2338 link2339 link2340 link2341 link2342 link2343 link2344 link2345 link2346 link2347 link2348 link2349 link2350 link2351 link2352 link2353 link2354 link2355 link2356 link2357 link2358 link2359 link2360 link2361 link2362 link2363 link2364 link2365 link2366 link2367 link2368 link2369 link2370 link2371 link2372 link2373 link2374 link2375 link2376 link2377 link2378 link2379 link2380 link2381 link2382 link2383 link2384 link2385 link2386 link2387 link2388 link2389 link2390 link2391 link2392 link2393 link2394 link2395 link2396 link2397 link2398 link2399 link2400 link2401 link2402 link2403 link2404 link2405 link2406 link2407 link2408 link2409 link2410 link2411 link2412 link2413 link2414 link2415 link2416 link2417 link2418 link2419 link2420 link2421 link2422 link2423 link2424 link2425 link2426 link2427 link2428 link2429 link2430 link2431 link2432 link2433 link2434 link2435 link2436 link2437 link2438 link2439 link2440 link2441 link2442 link2443 link2444 link2445 link2446 link2447 link2448 link2449 link2450 link2451 link2452 link2453 link2454 link2455 link2456 link2457 link2458 link2459 link2460 link2461 link2462 link2463 link2464 link2465

[Vue.js] Component inside the default slot

when fairly new to vue.js and currently am working on the first project with it.

there is encountered this problem which I cannot seem to find a solution for, there is “AuthPage.vue” component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue.js file with custom element it seems to be working perfectly. when not sure what when doing wrong.

AuthPage.vue

<template>
<div>
<div class=”page-brand-info”></div>

<div class=”page-login-main”>
<img class=”brand-img” src=”/assets/global/images/logo.jpg”>
<h3 class=”font-size-24 text-center”><slot name=”title”></slot></h3>
<slot name=”message”></slot>

<slot></slot>

<footer class=”page-copyright”>
<p> { moment().year() }. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</template>
<script>
import LoginForm from ‘./LoginForm.vue’;
import ResetPasswordForm from ‘./ResetPasswordForm.vue’;

export default {
components: { LoginForm, ResetPasswordForm }
}
</script>

login.blade.php

@extends(‘backoffice.layout.auth’)

@section(‘content’)
<auth-page>
<template v-slot:title>Sign In</template>

<login-form></login-form>
</auth-page>
@endsection

Thank you for the help!
Eddie

Solution :

You’ll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of the component, vue.js doesn’t know what <login-form> is.

Since you’re using laravel, in the resources/js/app.js file add the following:

import LoginForm from ‘./path/to/LoginForm.vue’;

Vue.component(‘login-form’, LoginForm);

[Vue.js] How to set vue-cookie expiry in hours

there is below code to expiry my vue-cookie in 3 hrs

VueCookie.set(‘S3ID’, getS3ID, 3);

This function is setting cookie expiry time as 3 days instead of 3 hrs. Is there any reason to this?

Solution :

You could try using a Date object:

var expireIn = new Date(new Date().getTime() + 180 * 60 * 1000);
VueCookie.set(‘S3ID’, getS3ID, {
expires: expireIn
});

Solution 2:

there is found the solution.

VueCookie.set(‘S3ID’, getS3ID, { expires: “3h” });

Solution 3:

Try

VueCookie.set(‘S3ID’, getS3ID, ‘3h’);

[Vue.js] Vue Animation inside the div element doesn't work

I tried the example

<div id=”demo”>
<button v-on:click=”show = !show”>
Toggle
</button>
<transition name=”fade”>
<p v-show=”show”>hello</p>
</transition>
</div>

It works!
But when I replaced the Element p with div,it doesn’t work!

<div id=”demo”>
<button v-on:click=”show = !show”>
Toggle
</button>
<transition name=”fade”>
<div v-show=”show”>hello</div>
</transition>
</div>

why vue.js Animation inside the div element doesn’t work

Solution :

Add the css

.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}

[Vue.js] How to pass data from Vue to Laravel for patch request?

i’m trying to send a patch request from my Vuetify data-table to Laravel & then to a mySQL DB.

Here’s various code pieces from my controller.php, my api.php & the actual Vuetify file:

api.php:

Route::patch(‘machines/{id}’, [
‘as’ => ‘machines/{id}’,
‘uses’ => ‘MachineController@update’
]);

MachineController.php

$machines = Machine::find($request->id)->update();

the actual axios patch req. in the .vue.js file:

Object.assign(this.machines[this.editedIndex], this.editedItem);

axios.patch(“machines/“ + this.editedItem.id, {
editedItem: this.editedItem
})

In the Telescope payload section i’m getting the updated object, but i’m also getting a message:

“SQLSTATE[23000]:
Integrity constraint violation:
1048 Column cannot be null.

For all the columns.

there is also tried this syntax for a patch method:

if (this.editedIndex > -1) {
Object.assign(this.machines[this.editedIndex], this.editedItem);
axios
.patch(“machines/“ + this.editedItem.id)
.then(res => {
this.editedItem = Object.assign({}, this.editedItem);
})
.catch(err => {
console.log(err);
});
} else {
this.machines.push(this.editedItem);
}
this.close();

And i tried setting up the controller like this:

$machines = Machine::find($request->id);
$machines->machine_number = $request->input(‘machine_number’);
$machines->machine_name = $request->input(‘machine_name’);
$machines->machine_company = $request->input(‘machine_company’);
$machines->machine_division = $request->input(‘machine_division’);
$machines->machine_center = $request->input(‘machine_center’);
$machines->machine_speed = $request->input(‘machine_speed’);
$machines->save();

But I’m still getting the same error.
Can someone help me out, or at least point me in the right direction?
Thanks!

Solution :

there is solved my issue: I was passing empty object with my axios.patch() request because i’ve set it up wrong. I’ve changed the object’s structure to key:value pairs and voila, it worked!

[Vue.js] Find the path of an object in which there is a key with a speicific in a array of objects

Let’s say there is the array of dictionaries like below. How do I find a path to the object with id: 121. when trying to do this in javascript, but when not getting anywhere with this. I need an algorithm or something to get an idea for acheiving this.

The result when expecting is something like [{id:1, name:”foo”}, {id: 12, name:”shoo”}, {id: 121, name:”jhj”}]

[
{
“id”: 1,
“name”: “foo”,
“submenus”: [
{
“id”: 11,
“name”: “bar”,
“submenus”: [
{
“id”: 111,
“name”: “abc”
}
]
},
{
“id”: 12,
“name”: “shoo”,
“submenus”: [
{
“id”: 121,
“name”: “jhj”
}
]
}
]
},
{
“id”: 2,
“name”: “kjk”
}
]

this is the code I wrote for it. This code is for VueJS.

getBreadcrumbs(menuItems, id, breadcrumpsArray) {
for (var i = 0; i < menuItems.length; i++) {
if (menuItems[i].id == id) {
breadcrumpsArray.push({
id: menuItems[i].id,
name: menuItems[i].text
})
return breadcrumpsArray
} else {
if (menuItems[i].submenus !== ‘undefined’) {
if (menuItems[i].submenus.length > 0) {
console.log(‘shoo’)
this.getBreadcrumbs(menuItems[i].submenus, id, breadcrumpsArray)
}
}
}
}
}

This shows error saying:

Error in render: “TypeError: menuItems[i].submenus is undefined”

Solution :

You could define a recursive function findPath() to achieve what you require. See the notes documented in the snippet below:

const data=[{“id”:1,”name”:”foo”,”submenus”:[{“id”:11,”name”:”bar”,”submenus”:[{“id”:111,”name”:”abc”}]},{“id”:12,”name”:”shoo”,”submenus”:[{“id”:121,”name”:”jhj”}]}]},{“id”:2,”name”:”kjk”}];

/* Define a recursive function that finds the item path from root
of the data set, to the first child found with matching id */
const findPath = (items, id) => {

/* Iterate the items of this level */
for(const item of items) {

if(item.id === id) {
/* If id matches id, return tail of resulting array that
will be our path result */
return [item]
}
else if(Array.isArray(item.submenus)) {
/* If submenus sub array present, search the items of the
submenu recursivly for a nested child with matching id */
const result = findPath(item.submenus, id)
if(Array.isArray(result)) {
/* If recursive call returns an array result, this means
a nested child with id was found, so prefix this item to
the results array */
return [item].concat(result)
}
}
}
}

/* Map id and name of each item in found path to result array */
const result = findPath(data, 121).map(({ id, name }) => ({ id, name }));

console.log( result );

Also as a separate note, in the current code this is a minor error in the way you’re checking for the presence of the submenus sub-array on menu items.

Applying the following change should result the error you are seeing:

getBreadcrumbs(menuItems, id, breadcrumpsArray) {
for (var i = 0; i < menuItems.length; i++) {
if (menuItems[i].id == id) {

breadcrumpsArray.push({
id: menuItems[i].id,
name: menuItems[i].text
});

} else {

/* Add “typeof” here to determine if submenus if undefined in this way */
if (typeof menuItems[i].submenus !== ‘undefined’) {
if (menuItems[i].submenus.length > 0) {
this.getBreadcrumbs(menuItems[i].submenus, id, breadcrumpsArray)
}
}
}
}

/* Move this here */
return breadcrumpsArray;
}

For more information on this typeof operator, see this documentation

Solution 2:

You could find the path and if found take an object for the node into the result set.

function findPath(array, target) {
var path;
return array.some(({ id, name, submenus = [] }) => {
if (id === target) return path = [{ id, name }];
var temp = findPath(submenus, target);
if (temp.length) return path = [{ id, name }, …temp];
})
? path
: [];
}

var array = [{ id: 1, name: “foo”, submenus: [{ id: 11, name: “bar”, submenus: [{ id: 111, name: “abc” }] }, { id: 12, name: “shoo”, submenus: [{ id: 121, name: “jhj” }] }] }, { id: 2, name: “kjk” }];;

console.log(findPath(array, 121))
.as-console-wrapper { max-height: 100% !important; top: 0; }

Solution 3:

I finally found a way to do that, here is my algorithm’s steps:

First, DFS (Depth First Search) the tree until you find the node with the id you’re looking for
When you find it, push it to breadscrumpArray and return breadscrumpArray
Everytime we search a submenu element we will know if the node we are looking for is a child of that element or not, as if it is not a child, the return of the function getBreadcrumbs will be false

Hope that helps, let me know if you have any questions in the comments, cheers!

function getBreadcrumbs(menuItems, id, breadcrumpsArray) {
for (var i = 0; i < menuItems.length; i++) {
if (menuItems[i].id == id) {
// Found the node, push it and return the breadcrumpsArray
breadcrumpsArray.push({
id: menuItems[i].id,
name: menuItems[i].name
});
return breadcrumpsArray;
} else {
if (typeof menuItems[i].submenus !== ‘undefined’) {
if (menuItems[i].submenus.length > 0) {
if (getBreadcrumbs(menuItems[i].submenus, id, breadcrumpsArray)) {
// Unshift to push the node to the front of the array
breadcrumpsArray.unshift({
id: menuItems[i].id,
name: menuItems[i].name
});
return breadcrumpsArray;
}
}
} else {
// The node we are looking for is not in this path of the tree
return false;
}
}
}
}

[Vue.js] How to pass v-for index to child in Vue?

there is the below parent and child components. In the parent when using obj.Array with v-for to list multiple children components. The issue is that stuff1 and stuff2 will be the same for each child but I need to grab each element of obj.array for each child. What is the correct way to do this? Thanks

Parent:

<template>
<div>
<child v-bind:obj=”obj” v-for=”(arrVal, index) in obj.array” :id=”index” :key=”arrVal”/>
</div>
</template>

<script>
export default {
data() {
return {
obj: { stuff1: “str1”, stuff2: “str2”, array: [“arrVal1”, “arrVal2”, “arrVal3”] }
};
}
};
</script>

Child:

<template>
<div>
<p>{obj.stuff1}</p>
<p>——</p>
<p>{obj.stuff2}</p>
<p>——</p>
<p>{obj.array[index]}</p>
</div>
</template>

<script>
export default {
props: { obj: Object }
};
</script>

What I would like to render:

str1
-—– str2
-—– arrVal1

str1
-—– str2
-—– arrVal2

str1
-—– str2
-—– arrVal2

Solution :

try this:

<template>
<div v-for=”val in obj.array”>
<p>{obj.stuff1}</p>
<p>——</p>
<p>{obj.stuff2}</p>
<p>——</p>
<p>{val}</p>
</div>
</template>

<script>
export default {
props: { obj: Object }
};
</script>

What when suggesting is just to iterate over the array in the child component.

[Vue.js] VusJS DOM update, when a a new value is selected from dropdown

when trying to update DOM by the following logic but it’s not working,

index.vue.js [Template part]

<div>
<div v-for=”obj in objects” :key=”obj.id”>
<select v-model=”obj.quantity” @change=”qtyChange(obj)”>
<option value=”1”>1</option>
<option value=”2”>2</option>
<option value=”3”>3</option>
</select>

<div class=”w-1/5”>
<p class=” pt-4 text-right”>${ getObjectPrice(obj) }</p>
</div>
</div>
</div>

index.vue.js [Script part]

<script>
props[‘selectedObjs’],
data () {
return {
objects: []
}
},
mounted: {
this.objects = this.selectedObjs
},
methods: {
getObjectPrice(obj)
{
// some mathematical calculations
// obj.quantity is used in multiplication
return answer
},

qtyChange(obj) {
getObjectPrice(obj)
}
}
</script>

there is tried to watch the objects data property but it is not working, there is to show the updated price of objects based on the quantity selected from the dropdown. if anyone can suggest me a good solution.

Solution :

Try to store selected value in local data. Then use it for calculation. And For calculation, better use computed rather method. In template print out the computed value.

[Vue.js] Vue js not able to get config value

console.log(process.env.test); prints undefined.

there is below config in my dev.env.js file.
Is there anything when missing?

‘use strict’
const merge = require(‘webpack-merge’)
const prodEnv = require(‘./prod.env’)

module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”‘,
TEST: ‘“http://localhost/api"'
})

Solution :

If you are using the latest VueJS, you should prefix the ENV variables with VUE_APP_. See the documentation.

‘use strict’
const merge = require(‘webpack-merge’)
const prodEnv = require(‘./prod.env’)

module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”‘,
VUE_APP_TEST: ‘“http://localhost/api"'
})

Also, note that NODE_ENV and BASE_URL are the two exceptions for this rule.

[Vue.js] conditional rendering using vue.js

when trying to change the input type of an email field based on whether the user is on a desktop or a mobile device.

there is added a method which detects whether the user is on a mobile device or not

get isMobile() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return true;
} else {
return false;
}
}

I tried to implement it in the html file like the following

<form-field :label=”label”>
<span class=”mandatory_field” v-if=”required”>*</span>
<div v-if=”!isMobile()”>
<desktop>
<input v-bind:class=”inputStyle”
type=”text”
:id=”id”
:name=”name”
@input=”$emit(‘input’,$event.target.value)”
:placeholder=”placeholder”
:value=”value”
/>
</desktop>
</div>
<div v-else>
<mobile>
<input v-bind:class=”inputStyle”
type=”email”
:id=”id”
:name=”name”
@input=”$emit(‘input’,$event.target.value)”
:placeholder=”placeholder”
:value=”value”
/>
</mobile>
</div>
<p class=”field_error”>{ error }</p>
</form-field>

but all this does is make the email field disappear.

What is the correct way to implement this functionality in Vue.js?

Solution :

You’ve defined isMobile as a getter property. This isn’t necessary in Vue, and typically you would make this a computed property instead (a “computed property” is Vue-specific, see the docs).

Also you wouldn’t call it like a method because it isn’t a method, it’s a property.

<div v-if=”isMobile”>Mobile</div>
<div v-else>Desktop</div>

computed: {
isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
}

Technically it needn’t be a computed property since it doesn’t depend on any of the component’s data and its value will never change, so you can instead define it as a normal data property:

data() {
return {
isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
}

[Vue.js] Vue variables not reactive in children of extended TypeScript parent class

I very recently started playing around with TypeScript on my Vue.js projects. For my current project (a very simple chat application) there is created a TypeScript class called ChatParent.ts. It contains all methods and variables necessary for sending/receiving messages. I extend this class in my other components. Calling the parent methods from these child class works fine, however, when I monitor a variable in the parent class (e.g., username) the change is not reflected in the DOM of the child component.

there is tried adding setter/getter methods and computed properties (e.g., get methodName(): boolean), neither of which works.

The code below is from ChatParent.ts and has been simplified.

@Component({
name: “ChatParent”,
})
export default class ChatParent extends vue.js {
private chatClient: new ChatClient(…);
subscribed: boolean = false;

username: string = “”;

subscribe() {
const subscriptionRequest = new SubscriptionRequest();
subscriptionRequest.setUsername(username);

this.chatClient.subscribe(subscriptionRequest).on(“data”, data => {
this.subscribed = true;
});
}

}

The following is from TypeBox.vue.

<template>
<v-container pa-2>
<v-textarea
outline
label=”Type message here…”
:disabled=”!subscribed”
v-model=”message”
\></v-textarea>
</v-container>

</template>

<script lang=”ts”>
import {Component} from “vue-property-decorator”;
import ChatParent from “@/components/ChatParent.ts”;

@Component({
name: “TypeBox”,
})
export default class TypeBox extends ChatParent {
message : string = “”;
}
</script>

Whenever the data callback is called in the subscribe(…) method, the subscription variable gets updated in the parent class, but the change is not reflected in the child component (where it is supposed to enable the text area if the subscribe variable is true).

I think that my understanding of vue.js + TypeScript is perhaps completely incorrect (with regards to extending classes). I would, therefore, really appreciate some insight.

Solution :

My guess is that some data from one of the classes may be undefined .In that case the data won’t be reactive (see: https://github.com/vuejs/vue-class-component#undefined-will-not-be-reactive ) . you could try to use this syntax e.g username: string = null!