link959 link960 link961 link962 link963 link964 link965 link966 link967 link968 link969 link970 link971 link972 link973 link974 link975 link976 link977 link978 link979 link980 link981 link982 link983 link984 link985 link986 link987 link988 link989 link990 link991 link992 link993 link994 link995 link996 link997 link998 link999 link1000 link1001 link1002 link1003 link1004 link1005 link1006 link1007 link1008 link1009 link1010 link1011 link1012 link1013 link1014 link1015 link1016 link1017 link1018 link1019 link1020 link1021 link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095

[Vue.js] Display data with relationship in Laravel & Vue

I’m trying to display data with a relationship (using many-to-many) within my vue.js component.

I store users in object from rest API:

users: {},
//…
axios.get(“api/user”).then(({data}) => (this.users = data));

An example of JSON returned from api/user:

{“current_page”:1,”data”:[{“id”:2,”name”:”Andrew”,”description”:”Testing”,”role”:[{“id”:2,”role_title”:”TestTitle”,”pivot”:{“user_id”:2,”role_id”:2}

When displaying the data I can do

<tr v-for=”user in users.data” :key=”user.id”>
<td>{user.name}</td> // DOES work, displays ‘Andrew’

However if I try to do:

<td>{user.role.role_title}</td> //does NOT work, should display ‘TestTitle’

It displays nothing, what am I doing wrong?

Solution :

user.role is an array of roles. To display the first role (assuming there will always be at least one role) you can do:

<td>{ user.role[0].role_title }</td>

[Vue.js] Cannot render images dynamically to carousel Vuejs

I’ve set up a carousel using bootstrap-vue. I used a for loop and an array of objects to dynamically create the component. In each of the slide, I will include a text as well as a background image. I was able to render the texts dynamically. However, the background image only appeared at the first slide. For subsequent slides, the image will not be rendered anymore. What seems to be the problem? Below are my codes and a screenshot of the result

Update: when still not able to get this to work. Can anyone help me?

<template>
<div>
<b-carousel
id=”carousel-1”
v-model=”slide”
:interval=”4000”
controls
indicators
background=”#ababab”
style=”text-shadow: 1px 1px 2px #333;”
@sliding-start=”onSlideStart”
@sliding-end=”onSlideEnd”
\>
<!– Text slides with image –>
<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:text=”item.text”
:style=”{ ‘background-image’ : ‘url(\‘’ + item.image + ‘\‘)’ }”
\></b-carousel-slide>
</b-carousel>
<ProductList/>
</div>
</template>

<script>
// 1. Loading images asychronously later on from S3
// https://stackoverflow.com/questions/50659676/how-to-load-image-src-url-in-vuejs-asyncronously
import ProductList from “@/components/product/ProductList.vue”;

export default {
components: {
ProductList
},
data() {
return {
carouselItems: [
{
id: 1,
image: “https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
text: “Nulla vitae elit libero, a pharetra augue mollis interdum. (1)”
},
{
id: 2,
image: “https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
text: “Nulla vitae elit libero, a pharetra augue mollis interdum. (2)”
},
{
id: 3,
image: “https://source.unsplash.com/LAaSoL0LrYs/1920x1080",
text: “Nulla vitae elit libero, a pharetra augue mollis interdum. (3)”
}
],
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>

<style scoped>
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

Carousel when it was first rendered

Subsequent slide not display image

Returning back to slide 1 and the background image is gone

Solution :

As you use bootstrap-vue.js library, you can use “caption” attribute instead of “text” and “img-src” instead of style:background. Because b-carousel-slide component override style tag.

<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:caption=”item.text”
:img-src=”item.image”
\></b-carousel-slide>

If you want to have a custom style for the crousal you can set an additional class attr to the tag like:

<b-carousel-slide
class=”MyCustomClass”
….
\></b-carousel-slide>
<style>
.MyCustomClass {
width: 100%;
object-fit: cover;
}
</style>

But pay attention that the carousal you are using is either responsive and also full-width. I think the problem is something else.

[Vue.js] How to add Bulma page loader extension as Vue component?

I’m trying to set up page-loader element which is Bulma-extension in a vue.js project. Is there a way to add page-loader as a vue.js component?

there is tried to import page-loader.min.js and use it but doesn’t work at all.

<template>
<div class=”steps”>
<div class=”step-marker”>

</div>
</div>
</template>

<script>
import { bulmaSteps } from ‘bulma-extensions/dist/js/bulma-extensions.min’;

export default {
name: “TestingStep”,
mounted: function() {
this.steps = bulmaSteps.attach();
},
data() {
return {
steps: [],
}
},
}
</script>

Solution :

Import CSS file in the script section and it works like a charm.

import ‘bulma-extensions/bulma-steps/dist/css/bulma-steps.min.css’;

Solution 2:

Is this what you trying to achieve.

PageLoader.vue

<template>
<div class=”pageloader”>
<span class=”title”>Pageloader</span>
</div>
</template>

<script>
import ‘bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.min.css’;
</script>

And import the component it the desirable vue.js file.

[Vue.js] How to set header and options in axios?

I use axios to perform a HTTP post like this:

import axios from ‘axios’
params = {‘HTTP_CONTENT_LANGUAGE’: self.language}
headers = {‘header1’: value}
axios.post(url, params, headers)

Is this correct? Or should I do:

axios.post(url, params: params, headers: headers)

Solution :

Axios can be used in any of the following ways:

// Make a request for a user with a given ID
axios.get(‘/user?ID=12345’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// Optionally the request above could also be done as
axios.get(‘/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

then for a post request:

axios.post(‘/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

Do not forget to import axios library before making an ajax call with axios

Solution 2:

There are several ways to do this:

For a single request:

let config = {
headers: {
header1: value,
}
}

let data = {
‘HTTP_CONTENT_LANGUAGE’: self.language
}

axios.post(URL, data, config).then(…)

For setting default global config:

axios.defaults.headers.post[‘header1’] = ‘value’ // for POST requests
axios.defaults.headers.common[‘header1’] = ‘value’ // for all requests

For setting as default on axios instance:

let instance = axios.create({
headers: {
post: { // can be common or any other method
header1: ‘value1’
}
}
})

//- or after instance has been created
instance.defaults.headers.post[‘header1’] = ‘value’

//- or before a request is made
// using Interceptors
instance.interceptors.request.use(config => {
config.headers.post[‘header1’] = ‘value’;
return config;
});

Solution 3:

You can send a get request with Headers (for authentication with jwt for example):

axios.get(‘https://example.com/getSomething', {
headers: {
Authorization: ‘Bearer ‘ + token //the token is a variable which holds the token
}
})

Also you can send a post request.

axios.post(‘https://example.com/postSomething', {
email: varEmail, //varEmail is a variable which holds the email
password: varPassword
},
{
headers: {
Authorization: ‘Bearer ‘ + varToken
}
})

My way of doing it,is to set a request like this:

axios({
method: ‘post’, //you can set what request you want to be
url: ‘https://example.com/request',
data: {id: varID},
headers: {
Authorization: ‘Bearer ‘ + varToken
}
})

Solution 4:

You can pass a config object to axios like:

axios({
method: ‘post’,
url: ‘….’,
params: {‘HTTP_CONTENT_LANGUAGE’: self.language},
headers: {‘header1’: value}
})

Solution 5:

This is a simple example of a configuration with headers and responseType:

var config = {
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
responseType: ‘blob’
};

axios.post(‘http://YOUR\_URL', this.data, config)
.then((response) => {
console.log(response.data);
});

Content-Type can be ‘application/x-www-form-urlencoded’ or ‘application/json’
and it may work also ‘application/json;charset=utf-8’

responseType can be ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’

In this example, this.data is the data you want to send. It can be a value or an Array. (If you want to send an object you’ll probably have to serialize it)

Solution 6:

You can initialize a default header axios.defaults.headers

axios.defaults.headers = {
‘Content-Type’: ‘application/json’,
Authorization: ‘myspecialpassword’
}

axios.post(‘https://myapi.com', { data: “hello world” })
.then(response => {
console.log(‘Response’, response.data)
})
.catch(e => {
console.log(‘Error: ‘, e.response.data)
})

[Vue.js] v-if not reactive (or data not reactive)

there is following vue.js component (there is removed rest of the code just to point out this issue).

<template>
<span splitpanes-default=”70”>
Details Pane
<uploader v-if=”isUpload” class=”uploader-example”>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :directory=”true”>select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</span>
</template>

<script lang=”ts”>
import { Component, vue.js } from ‘vue-property-decorator’;
import uploader from ‘vue-simple-uploader’;

Vue.use(uploader);

@Component()
export default class In extends vue.js {

public isUpload: boolean = false;

public upload() {
this.isUpload = true;
}

}
</script>

when I call upload method (let’s say on click of button), “isUpload” property is setting to true, but uploader is not showing back.

Seems like property is not reactive. what do I need to make it reactive.

Solution :

Try using :key=”” on that component

<template>
<span splitpanes-default=”70”>
Details Pane
<span v-if=”isUpload”>
<uploader :key=”uploaderKey” class=”uploader-example”>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn>select files</uploader-btn>
<uploader-btn :directory=”true”>select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</span>
</span>
</template>

<script lang=”ts”>
import { Component, vue.js } from ‘vue-property-decorator’;
import uploader from ‘vue-simple-uploader’;

Vue.use(uploader);

@Component()
export default class In extends vue.js {
uploaderKey = 0;
public isUpload: boolean = false;

public upload() {
this.uploaderKey = this.uploaderKey + 1;
this.isUpload = true;
}

}
</script>

Solution 2:

Try to use a computed property by adding get before upload() function body :

@Component()
export default class In extends vue.js {

public isUpload: boolean = false;

get upload() {
this.isUpload = true;
}

}

[Vue.js] Vue JS computed property and jquery

to turn an element invisible when a (bootstrap) tab is active.

So, the way I’m trying to do it is creating a computed property that returns if the tab is active using jquery this way:

computed: {
IsAbainteracoesAtiva: function () {
return ($(‘div.active’)[1].id == “interacoes”)
}
}

But this computed property always returns false, even if it’s true. My guess is that vue.js is not updating it.

Any sugestions? I’m opened to other solutions too.

Solution :

I assume the bootstrap tap is active with a click, otherwise correct me, and I’ll come back with another answer.

// Simulate tab
<tab @click=”toggleTabState”></tab>

// Simulate bootstrap element to show
<div v-if=”tabIsOpen”></div>

export default {
data() {
return {
tabIsOpen: false
}
},

methods: {
toggleTabState() {
this.tabIsOpen = !this.tabIsOpen
}
}
}

Gonna need some of the HTML to see what else is going on. Are you iterating through a lot of elements with a v-for?

[Vue.js] Building Vue for development and runtime only for use in Chrome Apps

when struggling with converting a jQuery based Chrome app to Vue. Because of Chrome Apps’ Content Security Policy (CSP) it is not possible to use eval() and thus compiling templates must be done beforehand.

That itself is not a problem with Vue’s Single File Components (SFC) approach where all templates get compiled to render functions in the build process.

However, since the build target is production all warnings and helpful comments from vue.js are stripped off. So for example, if I forget a property for a component, I get not warning about it. It just won’t show up. That makes development very difficult.

Then, if I in package.json for build use:

“build”: “vue-cli-service build –mode development”

I get an error in the Chrome app:

Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource: ‘wasm-eval’”.

And there are indeed a lot of evals in the index.js file starting with

eval(“__webpack_require_

So my question is:

How do I make the build system preserve warnings and hints in the console without using the forbidden eval’s?

when not sure if the problem is caused by the template compiler being included, but if so, how do I tell the builder not to use the compiler but still use development mode?

Solution :

It is an “issue” with the CSP, you need to use the vue.runtime.js version of Vue.

Please refer to https://vuejs.org/v2/guide/installation.html#CSP-environments

[Vue.js] Parse JSON encoded data in Vue Component

when passing a json encoded data to my vue.js component as a prop, when when printing the whole prop variable then it is showing that the data has successfully received, but when not able to parse the data.

profile.blade.php

@extends(‘layouts.app’)

@section(‘content’)

<my-profile user-details=”{ json_encode($userDetails) }”></my-profile>

@endsection

MyProfile.vue

<template>
<div class=”container”>
<div class=”row justify-content”>
<div class=”col-md-3” id=”profile-image”>
<img class=”img-fluid rounded” src=”https://www.w3schools.com/bootstrap4/paris.jpg" alt=”Profile Image”>
</div>
<div class=”col-md-12”>
<p>{userDetails}</p>
<p> Name: { userDetails.first_name } </p>
</div>
</div>
</div>
</template>

<style>

#profile-image {
margin-bottom: 30px;
}
</style>

<script>
export default {
props: [“userDetails”]
}
</script>

Output

{“user_id”:2,”first_name”:”Shan”,”last_name”:”Biswas”,”email”:”shanpro.2015@gmail.com“,”phone”:”9508168983”,”created_at”:”2019-05-03 05:43:17”,”updated_at”:”2019-05-03 05:43:17”}

Name:

Solution :

You need to bind the value to the component as dynamic and not static.
So change the blade file to:

@extends(‘layouts.app’)

@section(‘content’)
<!– see the colon in front of the props, that is a shortcut for v-bind:prop-name –>
<my-profile :user-details=”{ json_encode($userDetails) }”></my-profile>

@endsection

Otherwise are all values passed to the component as a simple string.

Solution 2:

Change this:

<my-profile user-details=”{ json_encode($userDetails) }”></my-profile>

with this:

<my-profile user-details=‘@json($userDetails)’></my-profile>
// Pay attention to single quotes instead of double

This worked for me.

Solution 3:

Update profile.blade.php to following!

@extends(‘layouts.app’)

@section(‘content’)

<my-profile user-details=”{ $userDetails }”></my-profile>

@endsection

[Vue.js] Vue issue applying class when element is not in view

to apply a class to a DOM element only when this element is in view inside my viewport (any part of it appearing on screen), however my console log says it’s always not in view so the css class is not being applied. For this purpose I’m using a vue.js directive and a scroll event listener, here is my directive:

Vue.directive(‘focus-toggle-class’, {
isLiteral: true,
inserted: (el, binding, vnode) => {

let scrolled = false;
let rect = {};

let checkInView = function(){
if (inView) {
el.classList.add(binding.value);
console.log(‘in view’);
}
else{
el.classList.remove(binding.value);
console.log(‘not in view’);
}
};

window.addEventListener(‘load’, function() {
rect = el.getBoundingClientRect();
console.log(rect);
checkInView();
window.addEventListener(‘scroll’, function() {
scrolled = true;
});
});

let inView = (
rect.top >= 0 &&
rect.left >= 0 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
)

let timeout = setInterval(function() {
if (scrolled) {
scrolled = false;
checkInView();
}
}, 2000);

}
});

Solution :

You’re only checking if the element is in view inside load event on window (which probably happens way before the component is rendered, hence the bound code is never run.

But even if that code would run on load event of window, the only thing you’re binding on scroll event is an assignment:

scrolled = true;

… which is not checking if the element is in view, therefore won’t update the component.

[Vue.js] Vuetifyjs form validation with mask

I create one v-form in my component, inside this v-form I put a v-text-field with a mask and a rule to not null

<v-text-field mask=”###.###” :rule=”[v => !!v || ‘Required’]“> … </v-text-field>

but if my user type 22, when I try to validate the form I fot valid (because the text are not null, in my rules) but he don’t match with my mask.. how can I get both validations? tks

Solution :

You can use regex to check value.

:rule=”[v => !!v || ‘Required’, v => /^\d{3}\.\d{3}$/.test(v) || ‘Invalid format’]“

Edit

Interesting, . (dot) is not part of value, so better answer would be:

:rule=”[v => !!v || ‘Required’, v => /\d{6}/.test(v) || ‘Invalid format’]“

Live example: CodePen