How do I make ajax call with one of the call parameter being a computed State in VueX. For example, if I make this.$axios.get(‘someUrl/‘ + accID ), with accID being a computed property from VueX (via MapState). Sometimes id return ‘undefined’, which i suspect is due to axios making get request before the id data is populated from store

there is tried using watch() on ‘accID’ in vue.js component to wait until accID resolve but to no avail

//some partial code

computed: {
…mapState([‘user’]),
},

async fetchData() {

const [foodData, option] = await Promise.all([
this.$axios({
url: `food/${this.user.accID}`,
method: ‘get’,
}),
this.$axios({
url: ‘options’,
method: ‘get’,
})
])

//foodData returns undefined because user.accID is undefined (sometimes)

Expecting

this.$axios({
url:’food/12345’,
method: ‘get’
})

Instead

this.$axios({
url:’food/undefined’,
method: ‘get’
})

Solution :

Change ${user.accID} to ${this.user.accID} in url:

url: `food/${this.user.accID}`,

How do I set the baseUrl so if I switch from server to server on the frontend (Vue.js), it changes dynamically to baseUrl?

I show my code axios-auth.js code:

import axios from ‘axios’

const instance = axios.create({
baseURL: ‘http://mvp.test/api/public/api/'
// baseURL: ‘http://127.0.0.1:8000/api/' for testing localhost
});

and my .env file which have standard code for laravel.

Solution :

Taken from the official mix documentation, you can use an environment variable by creating a key in the .env prefixed with MIX_:

MIX_BASE_URL=http://mvp.test/api/public/api/

And run php artisan config:clear to be sure the new config is set.

Then, in javascript you can access the variable inside the process.env object:

process.env.MIX_BASE_URL

So you can simply use it like this:

const instance = axios.create({
baseURL: process.env.MIX_BASE_URL
});

Solution 2:

You can use a simple /api/ as the baseURL.

import axios from ‘axios’;

const instance = axios.create({
baseURL: ‘/api/‘
});

This will dynamically translate to whatever the url is.

This is the first time when trying out Typescript with Nuxt (v 2.6.1).
there is a fresh build with create-nuxt-app and have followed the official guide for Typescript Support

npx create-nuxt-app first-app
cd first-app
npm install -D @nuxt/typescript
echo “{}” > tsconfig.json
npm run dev

The Typescript guide further says:

INFO: The presence of the tsconfig.json in the project lets Nuxt.js
know you’re running a TypeScript project.

This file will be automatically updated with defaults value the first
time you’re running nuxt command.

Problem:

The tsconfig.json file is not updated
And when I create a simple ‘/pages/test.ts’ file it is not transpiled to .js file

Solution :

There few problems. First you are missed installation of ts-node.

Also please create an empty tsconfig.json file without any content. The docs was updated and its mentioned there. That should fix the problems

So I’m creating my first SPA in Laravel, along with vue. I decided to use Laravel mix instead of webpack and it seems to have broken for me, I now receive

[vue.js warn]: Failed to mount component: template or render function not defined.

Seems to happen when I add <router-view></router-view>.

I’ve tried the “solution” of adding .default, didn’t work.

export default new VueRouter({
routes: [
{
path: ‘/‘,
component: require(‘./views/Home.vue’).default
},
{
path: ‘/about’,
component: require(‘./views/About.vue’).default
}
]
});

app.js:

import ‘./bootstrap’;
import router from ‘./routes’;

new Vue({
el: ‘#app’,
router,
});

bootstrap.js:

import vue.js from ‘vue’;
import VueRouter from ‘vue-router’;
import axios from ‘axios’;

window.vue.js = Vue;
Vue.use(VueRouter);

window.axios = axios;

window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;

let token = document.head.querySelector(‘meta[name=”csrf-token”]‘);

if (token) {
window.axios.defaults.headers.common[‘X-CSRF-TOKEN’] = token.content;
} else {
console.error(‘CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

routes.js:

import VueRouter from ‘vue-router’;

export default new VueRouter({
routes: [
{
path: ‘/‘,
component: require(‘./views/Home.vue’)
}
]
});

HTML (welcome.blade.php):

<!DOCTYPE html>
<html lang=”{ str_replace(‘_‘, ‘-‘, app()->getLocale()) }”>
<head>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>Laravel</title>
<link rel=”stylesheet” href=”/css/app.css” type=”text/css”>
</head>
<body>
<div id=”app”>
<router-link to=”/“>Home</router-link>

<router-view></router-view>
</div>
<script src=”/js/app.js”></script>
</body>
</html>

Solution :

From bootstrap.js delete import VueRouter from ‘vue-router’; and Vue.use(VueRouter); and add Router plugin to vue.js inside of routes.js file and edit it as below:

import vue.js from ‘vue’;
import VueRouter from ‘vue-router’;

Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: ‘/‘,
component: require(‘./views/Home.vue’)
}
]
});

app.js is correct. there is implemented and tested this everything worked as expected.

in my vuejs application, there is a file called ProductDetails.vue. For the template, I used Vuetify to create a grid system where the product’s image will be at the left, and the product’s content to the right. However, there is encountered two problems. Firstly, how do i shift the images and content away from one another so that there is space. Secondly, how to shift the button to the right most of the product’s content. Below is my code, a screenshot of my current design and a screenshot of my desired design.

https://codepen.io/Issaki/pen/qwRWgZ

Update #1: when still trying to solve this issue, is there anyone that can help me?

<template>
<div>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md5 lg5>
<v-img
class=”white–text”
height=”350px”
src=”https://cdn.vuetifyjs.com/images/cards/docks.jpg"
/>
</v-flex>
<v-flex xs12 sm6 md7 lg7>
<p class=”subheading font-weight-light grey–text text–darken-1 mb-1”>Samsung</p>
<p class=”display-1 font-weight-light”>OnePlus 3</p>
<p
class=”subheading”
\>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class=”headline font-weight-medium”>$329</p>
<p class=”muted”>Inclusive of all taxes. Free home delivery.</p>
<v-btn color=”yellow”>
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-flex>
</v-layout>
</v-container>
</div>
</template>

Solution :

You can add space between the two v-flex if you simply add some padding to one of them. So by adding class=”pl-3” which translates to padding-left-3 to the second v-flex you can add some space. You can learn more about spacing helpers.

For the button just wrap it in:

<v-layout align-end justify-end>
<v-btn color=”yellow” >
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-layout>

You can learn more about it here.

Update: A better way to add spacing though would be to add grild-list-* to the container. In that case it will add some spacing to all the elements in the container so you dont need the added padding anymore. You can see the updated Codepen below and read more here.

there is forked and edited the Codepen.

Hope it helps :)

The (adoptive) height of the slick slider drops to 0px when I switch to another route/component of the vue.js app AND resize the window (e.g. from portrait to landscape orientation). Otherwise it works fine.

Any ideas how to resize it back to full height without destroying/unslick slick and loading all the images again?

here it works fine:

but here it fails:

Solution :

Ok, got it work. Found the right slick property/method in the source code of its Github Repo:

updated(){
window.homeslick = $(‘#home_slick_slider .inner-container’).slick({
dots: true,
lazyLoad: “ondemand”,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: false,
nextArrow: false,
fade: false,
adaptiveHeight: true,
});
},
activated(){
if(window.homeslick){
homeslick.slick(“refresh”);
}
}

Don’t understand why they didn’t described the existence and syntax of this method properly in the doc file…

when using ElementUI for a vue.js project, and to remove the label on pagination, but there is no attribute for this.

What would be the best way to remove the label on “pagination select”?

Here’s the pagination!

https://imgur.com/YDrA2wj

Thanks in advance.

Solution :

The label can not be easily removed because it’s hard coded in the source code : https://github.com/ElemeFE/element/blob/4f93968db41899c235ad9e388eaf2ac052805cd3/packages/pagination/src/pagination.js#L189

One easy hackish way of solving the problem would be to override the i18n.

import vue.js from ‘vue’
import Element from ‘element-ui’
import locale from ‘element-ui/lib/locale/lang/en’

locale.el.pagination.pagesize = ‘’

Vue.use(Element, { locale })

there is this year-month-value array with data from gsheet:

2019 - Mar - 3
2019 - Mar - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 3
2019 - Feb -
2019 - Feb - 2
2019 - Feb - 1
2019 - Feb - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1

to sum the total values for each month like this:

2019 - Mar - 4
2019 - Feb - 11
2019 - Jan - 4

This is my code now:

<div class=”row” id=”list”>
<div v-for=”entry in entries” v-if=”entry.gsx$regionofincident.$t === ‘Mediterranean’”>
<span>{entry.gsx$reportedyear.$t} - {entry.gsx$reportedmonth.$t} - {entry.gsx$numberdead.$t}</span>
</div>
</div>

How do I sum the monthly values? Where do I do the operations? In js or html?

Solution :

You can use a computed property to filter the Mediterranean items, and then use Array.prototype.reduce to tally the results:

computed: {
medEntries() {
const tally = this.entries
// only process Mediterranean items
.filter(entry => entry.gsx$regionofincident.$t === ‘Mediterranean’)

// tally results
.reduce((obj, entry) => {
const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
const val = obj[key]
const numDead = Number(entry.gsx$numberdead.$t || 0)

if (val) {
val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
} else {
obj[key] = entry
}
return obj
}, {})

return Object.values(tally)
}
}

Then replace entries in the template with the computed property name (medEntries):

<div v-for=”entry in medEntries”>…</div>

const entry = (year, month, numDead) => ({
gsx$regionofincident: { $t : ‘Mediterranean’ },
gsx$reportedmonth: { $t: month },
gsx$reportedyear: { $t: year },
gsx$numberdead: { $t: numDead },
})

const entries = [
entry(‘2019’, ‘Mar’, ‘3’),
entry(‘2019’, ‘Mar’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘3’),
entry(‘2019’, ‘Feb’),
entry(‘2019’, ‘Feb’, ‘2’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
]

new Vue({
el: ‘#app’,
data() {
return {
entries
}
},
computed: {
medEntries() {
const tally = this.entries
.filter(entry => entry.gsx$regionofincident.$t === ‘Mediterranean’)
.reduce((obj, entry) => {
const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
const val = obj[key]
const numDead = Number(entry.gsx$numberdead.$t || 0)

if (val) {
val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
} else {
obj[key] = entry
}
return obj
}, {})

return Object.values(tally)
}
}
})
<script src=”https://unpkg.com/vue@2.6.10"></script>

<div id=”app”>
<div v-for=”entry in medEntries”>
<span>{entry.gsx$reportedyear.$t} - {entry.gsx$reportedmonth.$t} - {entry.gsx$numberdead.$t}</span>
</div>
</div>

I’m just learning bootstrap 4. The columns are supposed to be the same height, but that’s not working out.
Code:

<div class=”row”>
<div class=”col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8”>
<div class=”projectDescBox”>
<h5>Project</h5>
<p>Stuff here</p>
</div>
</div>
<div class=”col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4”>
<div class=”projectDescBox”>
<h5>heading</h5>
<p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>
</div>

(it’s in a class container further up). According to the documentation, it should be automatically the same height. However, here is my output:
screenshot

What am I missing? Thanks!

Solution :

You’re columns are most likely the same height. It’s the projectDescBox that’s not. Use the h-100 class (height:100%) to make the inner boxes fill the height.

<div class=”projectDescBox h-100”>
<h5>heading</h5>
<p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>

https://www.codeply.com/go/d8lGpPzUOy

Also, col-xs-* has been replaced with col-* in Bootstrap 4. The multi-tier classes are also unnecessary since there all the same width at each tier.

this: col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8,

is the same as: col-8

You only need to have multi-tier classes when you want different widths at each tier (eg: col-8 col-sm-6 col-lg-4 col-xl-3)

I used slot HTML element to print the passed data from parent component to child component. And to use the data in my methods inside script tag inside child component. Is there a way to access the slot data and assign it to an object in the data method?

My parent component

<template>
<div class=”footer”>
<app-footer>Contacts</app-footer>
</div>
</template>

My child component

<template>
<div class=”child”>
<slot />
</div>
</template>

Solution :

If you wrap the slot in an element, you can use the ref tag to get a reference to the wrapper. Referencing slots directly is not supported, because it can be a single element, or multiple elements.

E.g.

<div class=’wrap’ ref=’wrap’>
<slot />
</div>

In js;

this.$refs.wrap // contains an HTMLElement
this.$refs.wrap.childNodes // contains (all) the element(s) in the wrap / slot

You can also use this.$slots and this.$children to get vue.js components you place in the slots.