link1781 link1782 link1783 link1784 link1785 link1786 link1787 link1788 link1789 link1790 link1791 link1792 link1793 link1794 link1795 link1796 link1797 link1798 link1799 link1800 link1801 link1802 link1803 link1804 link1805 link1806 link1807 link1808 link1809 link1810 link1811 link1812 link1813 link1814 link1815 link1816 link1817 link1818 link1819 link1820 link1821 link1822 link1823 link1824 link1825 link1826 link1827 link1828 link1829 link1830 link1831 link1832 link1833 link1834 link1835 link1836 link1837 link1838 link1839 link1840 link1841 link1842 link1843 link1844 link1845 link1846 link1847 link1848 link1849 link1850 link1851 link1852 link1853 link1854 link1855 link1856 link1857 link1858 link1859 link1860 link1861 link1862 link1863 link1864 link1865 link1866 link1867 link1868 link1869 link1870 link1871 link1872 link1873 link1874 link1875 link1876 link1877 link1878 link1879 link1880 link1881 link1882 link1883 link1884 link1885 link1886 link1887 link1888 link1889 link1890 link1891 link1892 link1893 link1894 link1895 link1896 link1897 link1898 link1899 link1900 link1901 link1902 link1903 link1904 link1905 link1906 link1907 link1908 link1909 link1910 link1911 link1912 link1913 link1914 link1915 link1916 link1917

[Vue.js] Using blade @can directives inside vuejs component

when having a blocker right now with regards to using blade @can directives inside a vuejs component.

@can(‘view user’, $lead)
<button>view</button>
@endcan

vue.js displays this as a text instead of using laravel’s gate

Solution :

I know it’s a boomer, but you could try adding the v-cloak property to the <button> tag, and changing the native @can directive to an @if (auth()->user()->can(‘view_user’, $lead))

This workaround should do the job.

[Vue.js] Method in base class does not exist during unit testing with mocha of Vue component

When there is a component in vue.js that extends from a base class, it works in run time in the browser, as expected. But when unit testing with mocha, the method on the base class disappears. In the simple example below this results in the error TypeError: this.methodInBaseClass is not a function. But in runtime it works, then the message Some other data is shown, as I would expect.

What is going wrong? And more importantly, how to fix it?

Consider this simple vue.js component:

<template>
<div>{ myData }</div>
</template>

<script lang=”ts”>
import { Component, Prop, vue.js } from ‘vue-property-decorator’;
import BaseClass from ‘@/components/BaseClass.vue’;

@Component
export default class HelloWorld extends BaseClass {
@Prop() private msg!: string;

private created(): void {
this.methodInBaseClass();
}
}
</script>

and the base class

<script lang=”ts”>
import { Component, Prop, vue.js } from ‘vue-property-decorator’;
export default class BaseClass extends vue.js {
protected myData: string = ‘Some data’;

protected methodInBaseClass(): void {
this.myData = ‘Some other data’;
}
}
</script>

and the unit test

import { expect } from ‘chai’;
import { shallowMount } from ‘@vue/test-utils’;
import HelloWorld from ‘@/components/HelloWorld.vue’;

describe(‘HelloWorld.vue’, () => {
it(‘Data is mutated’, () => {
const wrapper = shallowMount(HelloWorld);
expect(wrapper.html()).to.include(‘Some other data’);
});
});

Solution :

You need to add the Component decorator to the base class so that the method methodInBaseClass can be declared as vue-object methods:

<script lang=”ts”>
import { Component, Prop, vue.js } from ‘vue-property-decorator’;
@Component
export default class BaseClass extends vue.js {
protected myData: string = ‘Some data’;

protected methodInBaseClass(): void {
this.myData = ‘Some other data’;
}
}
</script>

[Vue.js] How to add columns edit, delete?

to use vue.js ag-grid. So there is looked in Get Started with ag-Grid in the vue.js Project
article.

But I can’t find any examples of how to add delete column as link-button?

<a :click=”handleDelete”>delete</a>

handleDelete(itemData) {
// should open popup here base on itemData
}

This is the code I’m using:

<template>
<ag-grid-vue.js style=”width: 500px; height: 500px;”
class=”ag-theme-balham”
:columnDefs=”columnDefs”
:rowData=”rowData”>
</ag-grid-vue>
</template>

this.columnDefs = [
{headerName: ‘Make’, field: ‘make’},
{headerName: ‘Model’, field: ‘model’},
{headerName: ‘Price’, field: ‘price’}
];

this.rowData = [
{make: ‘Toyota’, model: ‘Celica’, price: 35000},
{make: ‘Ford’, model: ‘Mondeo’, price: 32000},
{make: ‘Porsche’, model: ‘Boxter’, price: 72000}
];

Solution :

You need to define cellRendererFramework for custom column like this:

this.columnDefs = [
{ headerName: ‘Make’, field: ‘make’ },
{ headerName: ‘Model’, field: ‘model’ },
{ headerName: ‘Price’, field: ‘price’ },
{ headerName: ‘Delete’, cellRendererFramework: ‘DeleteCell’ }
];

Also make sure you registered the DeleteCell component:

components: {
AgGridVue,
DeleteCell,
},

[Vue.js] Vue transition list with mutual exclusive elements

I’m animating a list with transition-group in my app.
This list is filtered by a select input. The select is either selecting all of them or selecting mutual exclusive groups. This kinda breaks the transition badly.
I think I would need something like Transition Modes to make it work, but VueJS docs states that:

Transition modes are not available (for transition-group), because we are no longer alternating between mutually exclusive elements.

Here’s an example code:

<script src=”https://unpkg.com/vue/dist/vue.js"></script>

<div id=”app”>

<select v-model=”filter”>
<option v-for=”(o, i) in filterOptions” :key=”`o-${i}`“ :value=”o”> { o }</option>
</select>

<table>
<transition-group name=”fade” tag=”ul”>
<li v-for=”t in filteredRows” :key=”t.label”>{ t.label } - { t.prop }</li>
</transition-group>
</table>

</div>

new Vue({
el: ‘#app’,
data: {
filter: ‘all’,
filterOptions: [‘all’, ‘p1’, ‘p2’],
rows: [
{
label: ‘Row 1’,
prop: ‘p1’
},
{
label: ‘Row 2’,
prop: ‘p1’
},
{
label: ‘Row 3’,
prop: ‘p2’
},
{
label: ‘Row 4’,
prop: ‘p2’
},
]
},
computed: {
filteredRows: function() {
return this.rows.filter(o => o.prop === this.filter || this.filter === ‘all’);
}
}
})

.fade-enter-active,
.fade-leave-active,
.fade-move {
transition: all .5s;
}

.fade-enter,
.fade-leave-active {
opacity: 0;
}

li {
transition: all 1s;
}

And here’s a fiddle with it: https://jsfiddle.net/0v6pa8tk/

When selecting between p1 and p2 we can see the animation is clumsy.

Any ideas on this?

Thanks!

Solution :

Add a vertical translation:

.fade-enter-active,
.fade-leave-active,
.fade-move {
transition: all .5s;
}

.fade-enter,
.fade-leave-active {
opacity: 0;
}

.fade-enter, .fade-leave-to
{
opacity: 0;
transform: translateY(30px);
}

.fade-leave-active {
position: absolute;
}

li {
transition: all 1s;
}

[ https://jsfiddle.net/p36xe0qt/ ]

[Vue.js] VUE.JS Recieve a json file from url via axios in webpack-simpleSoultion is to use

when new to vue.js and I try to recieve the list from url.
There are some problems here:
1. I can’t define the axios in main.js so I can use it in index.html (this solution doesn’t work for me https://stackoverflow.com/a/51374448/9582441)
2. When I use console.log(response), the response is empty, thus the request havn’t been done

I’ve installed axios and vue.js threw the vue-cli

main.js

import vue.js from ‘vue’
import App from ‘./App.vue’
import axios from ‘axios’
import VueAxios from ‘vue-axios’

Vue.use(VueAxios, axios);

new Vue({
el: ‘#app’,
render: h => h(App)
})

index.html

<template>
<div id=”app”>{ info }</div>
</template>

<script>
export default {
name: “app”,
data() {
return {
info: null
};
},
mounted() {
Vue.axios
.get(“https://dog.ceo/api/breeds/list/all"
)
.then(response => (this.info = response));
console.log(response);
}
};

So that I just want to recieve a list and connect the axios somehow

Soultion is to use

this.axios

Solution :

the solution was to use

this.axios

[Vue.js] How to throw an array of marker in the props?

Good afternoon, help, how to pass data through the props to display points

i used Map here

My code:

In compknents maps:

const marker = new H.map.Marker({lat: this.coords lng: this.coords]);
map.addObject(marker);

Page where init components

<map-comp
:coord =
:show-chart=”selectedValueShow”/>

Getters:

test() {
return this.$store.getters.locationsTracking
}

A nested array comes in, in the getters. Help to do please

Solution :

Add the own property to the own map-comp component and use computed property of parent component. or you can use same getter to map-comp component it self.

<map-comp :show-chart=”selectedValueShow” :[componentProperty]=”markers”/>

// in parent component
computed: {
markers: function() { return this.$store.getters.locationsTracking; }
}

[Vue.js] Using onOk prop of Modal.method() in Vue Ant Design

I’m trying to use vue.js Ant’s confirmation modal dialog but nothing seems to be accessible within the onOk prop. I try to call any of my methods or this.$emit but get Error in v-on handler: “TypeError: Cannot read property ‘$emit’ of undefined”. I’d like to know how I can access my methods and data inside the onOk prop for this component.

deleteCampaign() {
this.$confirm({
title: `Are you sure you want to delete ${this.campaign.name}?`,
content: ‘This will permanently delete the campaign and all associated info.’,
okText: ‘Yes’,
okType: ‘danger’,
cancelText: ‘No’,
iconType: ‘warning’,
onOk() {
this.$emit(‘delete-campaign’, this.campaign.pk);
},
onCancel() {},
});
}

Solution :

onOk() { … } should be an arrow function to bind the context to the vue.js instance:

onOk: () => { this.$emit(…) }

[Vue.js] Vue issue when using method to dinamically render a responsive nav

I created an isResponsive() method to know if current screen is mobile or not, using this method to dinamically render some elements inside my nav or not, sadly this only works on initial render, id I change screen size my nav elements don’t update, even though I added an event listener for “resize” event in my component mounted hook.

Any idea what I’m doing wrong?

Here is my componenet:

<template>
<nav v-scroll-apply-class=”‘LAYOUTnav_fixed’” class=”LAYOUTnav1_maincontainer”>
<div class=”LAYOUTnav1_links_container” v-if=”!isResponsive()”>
<a class=”LAYOUTnav1_links_link fs_small hover_slide_center” v-for=”link in visibleLinks” :key=”link.name” :href=”link.url” :class=”{ active_nav : meta.activeNav == link.name}”>{ link.name }</a>
<button class=”LAYOUTnav1_links_button_container” type=”button” @click=”TOGGLE_CART_TAB()” v-bg-color=”‘rgb(10,10,10)’”>
<i class=”LAYOUTnav1_links_button_icon fas fa-shopping-cart fs_bigger”></i>
<span class=”LAYOUTnav1_links_button_text fs_normal” v-if=”cartItems.length != 0”>{ cartItems.length }</span>
<span class=”LAYOUTnav1_links_button_text fs_normal” v-if=”cartItems.length == 0”>El carrito esta vacio!</span>
</button>
</div>
<div class=”LAYOUTnav6_responsive_top_container” v-if=”isResponsive()”>
<a class=”LAYOUTwrapper_row” href=”/admin” v-if=”globals.auth.privileges > 1”>
<i class=”LAYOUTnav6_responsive_top_icon fas fa-cog fs_small”></i>
<span class=”LAYOUTnav6_responsive_top_text fs_small”>Administrar</span>
</a>
<a class=”LAYOUTwrapper_row” href=”/descuentos/canjear/codigo” v-if=”globals.auth.privileges > 1” v-del>
<i class=”LAYOUTnav6_responsive_top_icon fas fa-euro-sign fs_normal”></i>
<span class=”LAYOUTnav6_responsive_top_text fs_small”>Canjear cdigo</span>
</a>
</div>
</nav>
</template>
<!–SCRIPTS–>
<script>
import { isResponsive } from ‘../../includes/utils.js’;
export default {
name: ‘LAYOUTnav6’,

computed: {

},

mounted() {
console.log(this.$options.name+’ component successfully mounted’);

window.addEventListener(‘resize’, function () {
isResponsive();
console.log(‘resized’);
}, true);
},

methods: {

isResponsive:isResponsive,

}

};
</script>
<!–STYLES–>
<style scoped>
</style>

And my isResponsive method:

export function isResponsive() {

let viewportWidth = window.innerWidth || document.documentElement.clientWidth;

if (viewportWidth < 765) {
//on mobile
return true;
}
else {
//not on mobile
return false;
}
};

Solution :

the resize event handler is firing on resize, but the result is not binding against any reactive property of the component, neither a data attribute nor a computed property.

data: function() {
return {
isResponsive: false,
},
},
mounted() {
console.log(this.$options.name+’ component successfully mounted’);
var vue.js = this;
vue.isResponsive = isResponsive();
window.addEventListener(‘resize’, function () {
vue.isResponsive = isResponsive();
console.log(‘resized’);
}, true);
},

In the template markup use <div class=”LAYOUTnav1_links_container” v-if=”!isResponsive”>

[Vue.js] map.set - array.slice returns too many items

when working on a vue.js project and I try to implement pagination for a table.
A bug occurred and I can’t figure out what is wrong with the code.

I reproduced the problem in a simplified example: https://codesandbox.io/s/rj23rqp2k4

The problem is that when changing the settings to 10 per page and then back to 5 per page, there are 6 items on the second page instead of 5.

Html:

<template>
<div id=”app”>
<button @click=”currentPage-=1”>Previous</button>
<button @click=”currentPage+=1”>Next Page</button>
<select v-model=”perPage”>
<option value=”5”>5 per page</option>
<option value=”10”>10 per page</option>
</select>
<hr>
<ul v-for=”item in pages.get(currentPage)” :key=”item”>
<li>
<strong>{ item }</strong>
</li>
</ul>
<hr>
<h5>Current Page: {currentPage}</h5>
</div>
</template>

Script:

<script>
export default {
name: “App”,

data() {
return {
data: [“a1”,”b2”,”c3”,”d4”,”e5”,”f6”,”g7”,”h8”,”i9”,”j10”,”k11”],
perPage: 5,
currentPage: 1
};
},

computed: {
numberOfPages: function() {
let x = this.data.length / this.perPage;
if (x % 1 !== 0) {
x = Math.floor(x) + 1;
}
return x;
},
pages: function() {
let pgs = new Map();
for (
let index = 0, start = 0, end = this.perPage;
index < this.numberOfPages;
index++
) {
pgs.set(index + 1, this.data.slice(start, end));
start += this.perPage;
end += this.perPage;
}
return pgs;
}
}
};
</script>

It seems like the bug must be in the pages function as there are 6 items on one page and that shouldn’t be the case.

Solution :

The reason why it’s not working anymore after changing the value perPage via the dropdown is that the value of perPage became a string instead of a number.

To make it work, convert the value of this.perPage to a number first before using it like the example below.

pages: function() {
let pgs = new Map();
const perPage = Number(this.perPage);
for (
let index = 0, start = 0, end = perPage;
index < this.numberOfPages;
index++
) {
pgs.set(index + 1, this.data.slice(start, end));
start += perPage;
end += perPage;
}
return pgs;
}

You can also adapt @charliefl’s solution to make it cleaner but be sure to do the conversion as well.

See working implementation

Solution 2:

Try just using start and add this.perPage to it for the end index:

pages: function() {
let pgs = new Map();
for (
let index = 0, start = 0 ;
index < this.numberOfPages;
index++
) {
pgs.set(index + 1, this.data.slice(start, start + this.perPage));
start += this.perPage;
}
return pgs;
}

[Vue.js] Laravel & Vuejs mixins how to attribute a new value to shared variable?

I can use the mixin variables test and the method changeTest, when when I attribute a new value to the variable test, it’s only applied in one component. How to have it changed globally, on all components using it ?

My mixins are set in the file resources/js/mixins.js:

export default {
data() {
return {
test: ‘foo’,
};
},
methods: {
changeTest(v) {
this.test = v;
}
}
}

Then, there is my two components comp1.vue.js and comp2.vue.js in resources/js/components/, both looking like this:

<template>
<div>
{ test }
</div>
</template>

<script>
import myMixins from ‘../mixins’
export default {
mixins: [ myMixins ],
}
</script>

Both components are in my home.blade.php like this:

@extends(‘layouts.app’)

@section(‘content’)

<comp1></comp1>
<comp2></comp2>

@ensection

Solution :

you can use mixin method on main vue.js instance like this:

import vue.js from ‘vue’
import MyMixin from ‘./mixins.js’

Vue.mixin(MyMixin);

It will apply this mixin for all instance no matter how deep they are.