Vuejs

Since a while I'm stuck at the import function of my quiz generator application, because adm-zip cannot compress images properly.

Here is the errors that are returned for each images being uncompressed from the zip archive.

And here is the code involved in the compression of the archive, that is the component's method exportExecute() :

var AdmZip = require('adm-zip') var zip = new AdmZip() var uid = this.uid if (this.$parent.env === 'development') { zip.addLocalFile(this.$root.dbLocation) zip.addLocalFolder('app/dist/illustration', 'app/dist/illustration') } else { zip.addLocalFile(this.$root.dbLocation, 'resources/app/dist') zip.addLocalFolder('resources/app/dist/illustration', 'resources/app/dist/illustration') } zip.addFile('.token', uid) zip.writeZip(location) /** confirmation dialog */ dialog.showMessageBox({ title: 'Confirmation', message: 'La base de donnée a bien été exportée.', buttons: ['Ok'] })

The importExecute() method is not required here since it's properly working and the problem is the archive itself.

Also, I tried another zip compression module, but only in production it returned a pipe error, I never understood why it did that.

I'm stuck on this since a while and this is the last thing to be done in order to finish and release my app. Whoever helps me with this will be inserted in a credit.

Many thanks in advance.

I am making an online shop, which has two brands. Each of these brands contains 20+ products, which I want to display appropriately.

The urls work just fine when I enter a /single-product page from other pages, but if I hit refresh, essentially my first dynamic segment is discarded and replaced with the second one.

So if I enter this url in the adress bar (my website is in the folder /villebois):

http://localhost/villebois/wines/wine-brand1/my-awesome-single-wine

It's automatically replaced with this for some reason:

http://localhost/villebois/wines/my-awesome-single-wine

My routes looks like:

{ path: '/villebois/wines/:brand/:slug', component: SingleProduct, name: 'single-product' }, { path: '/villebois/wines/:brand', component: BrandContainer, name: 'single-brand' }

So the dynamic segment brand is overriden by slug. I am using Vue-router with the History API (note: if I use the default hash one, everything works perfectly)

Here is my .htaccess for configuring my server to serve index.php (I am using Wordpress) on every possible route:

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /villebois/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /villebois/index.php [L] </IfModule>

TL:DR If I directly enter a page with route with two dynamic segments using the History API, for some reason the first segment always gets replaced with the second. If I enter it from another page or use hash history, it works just fine.

I have the following:

const firebase = { items: { source: db.ref('items'), asObject: true, readyCallback: function() { console.log('items retrieved!'); } } } new Vue({ el: '#app', firebase, render: (h) => h(App) });

If I look in the console of the browser, I get to see 'items retrieved!' after a few seconds, but when I write

{{ typeof items }}

in the template I get undefined. I followed the docs on the VueFire Github page but can't seem to get it working.

Anyone got any ideas?

Thx

I have a mutation as follows:

[types.REMOVE_INVITATION] (state, removed_invitation) { state.invitations = _.filter(state.invitations, function (invitation) { return invitation.id !== removed_invitation.id; }); },

...which I run like so:

this.$store.commit(types.REMOVE_INVITATION, invitation);

This data is then displayed in a view like this:

<tr v-for="invitation in $store.state.group.invitations"> <td>@{{ invitation.email }} (pending)</td> <td class="has-text-right"> <button type="button" @click="revokeInvitation(invitation)" class="button is-warning">Revoke Invitation</button> </td> </tr>

This appears in the Vue devtools VueX tab as new line and the store data in the dev tools updates correctly. However the view does not update.

If I then click the "Commit This Mutation" link on this mutation in the devtools everything works as I expect it to - the view updates, and the invitation is removed from the list.

What is really confusing me is that I have another mutation that does essentially the same thing but which works fine:

this.$store.commit(types.REMOVE_GROUP_USER, user); [types.REMOVE_GROUP_USER] (state, removed_user) { state.group.users = _.filter(state.group.users, function (user) { return user.id !== removed_user.id; }); }, <tr v-for="(user, index) in $store.state.group.group.users" :key="user.id"> <td> @{{ user.username }} </td> <td class="has-text-right"> <button type="button" @click="kick(user)">Kick</button> </td> </tr>

I'm new to Vue.js.

I want to register a local component as described over here:

https://vuejs.org/v2/guide/components.html#Local-Registration

The only issue is that I need to register a component to an existing Vue instance not while creating a new instance something like:

const app = new Vue({ el: '#app' }); app.component({ 'my-component': { template: '<div>A custom component!</div>' } });

I have tried Vue.extend for that, but not working.

Why does the method set runs twice? You can see the console when you click the star. If I remove @click="set(rating)" nothing happens so not like it is again called elsewhere.

http://jsfiddle.net/q22tqoLu/

HTML

<div id="star-app" v-cloak> <star-rating value="0"></star-rating> </div> <template id="template-star-rating"> <div class="star-rating"> <label class="star-rating__star" v-for="rating in ratings" :class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}" @mouseover="star_over(rating)" @mouseout="star_out" @click="set(rating)"> <input class="star-rating star-rating__checkbox" type="radio" :name="name" :disabled="disabled" :id="id" :required="required" v-model="value"> ★ </label> </div> </template>

JS

'use strict'; Vue.component('star-rating', { template: '#template-star-rating', data: function data() { return { value: null, temp_value: null, ratings: [1, 2, 3, 4, 5] }; }, props: { 'name': String, 'value': null, 'id': String, 'disabled': Boolean, 'required': Boolean }, methods: { star_over: function star_over(index) { if (this.disabled) { return; } this.temp_value = this.value; this.value = index; }, star_out: function star_out() { if (this.disabled) { return; } this.value = this.temp_value; }, set: function set(value) { if (this.disabled) { return; } // This runs twice console.log(value); this.temp_value = value; this.value = value; } } }); new Vue({ el: '#star-app' });

The code is based on older version from someone, here it also doubles https://codepen.io/sktwentysix/pen/oZwXjN

In a vue.js app with server side rendering, taking inspiration from the Vue Hn project and the vue ssr tutorial.

There is an /api/index.js file making the requests to an api which return a promise like specified here.

import data from './data' // just an a json object export function fetchList() { return new Promise((resolve, reject) => { if (true) { resolve(data) } else { reject('error') } }) }

So far so good, everything works fine: the page is server side rendered on first load and then things happen client side.

Now, I try to make a real api request with axios:

import axios from 'axios' const apiurl = `https://my-api.com/api/v1` export function fetchList() { // the api call works fine in postman return axios.get(`${apiurl}/posts`) .then(response => { return response.data }) .catch(error => { return error }) }

It does not working anymore:

• the data are not fetched on the server (and not in the page on first load),
• the first page load is really slow (10s or more)
• after first page load, it still works fine client side…

Any idea on what is going wrong with this axios api call?

I need to delete the data in an id by using delete button, the values were got deleted but it was still displaying the values .. The deleted values were removed only after we doing a refresh of a page. How can i make the data gets deleted and removed from the table immediately after click event without doing page refresh?

Delete button:

<button class="btn btn-primary" v-on:click="deleteItems(booking.id)">Delete</button>

Script of delete:

methods: { deleteItems(id) { axios.delete(config.apiDomain+'/Booking/deleteItems/'+id).then((response)=>{ this.$router.push('/admin/booking'); console.log(id); }); }, }, mounted() { axios.get(config.apiDomain+'/Booking').then((response)=>this.items = response.data); }

I have a layout that i thought i'd implement using slots. There is basically a slot for a left menu and a slot for content. I'm trying to make a click inside a menu slot to change the component inside the content slot. Here is how my component, using the slotted layout looks like:

<template> <split-content> <-- this is the component that handles the layout <div slot="content-left"> <router-link to="/users/1">first user</router-link> </div> <div slot="content-right"> <router-view></router-view> </div> </split-content> </template>

So what i want to happen is for the router-link component to use the router-view defined in the content-right slot. But i guess that's probably impossible. The entire component is overwritten when i click on the link. Any ideas?

<li v-for="set in indirect_arr"> {{set.wp}} - {{set.bus1}} - {{set.bus2}} </li>

indirect_arr -> array of Objects(say, set).

Object Structure ->

set : { wp: '', bus1: [], bus2:[] }

bus1 & bus2 are reflected on dom as Array.

I want them as single elements .

I tried -> <li v-for="bus in set.bus1">{{bus}}</li> . Got Error -> set not defined !

I have this.

<transition-group name="slide" tag="div"> <div v-for="number in [currentSlide]" v-bind:key="number"> <p>{{ items[0].titulo }}</p> </div> </transition-group>

with this method

nextSlide: function () { if (this.currentSlide >= 6) { this.currentSlide = 0 } else { this.currentSlide++ } setTimeout(() => { this.items.pop() this.items.push(this.Slides.slides[this.currentSlide]) this.nextSlide() }, 4000) }

So, basically, elements appear (with animation) at the same time, when one is leaving, the other one is enter at the same time, but, not the same space, actually the next element to render appears down the first, and then takes it place.

Using mode="out-in" ins´t working

As in every application I have a few routes. For example (router/index.js excerpt):

[{ path: '/reporting', name: 'Reporting', component: reporting, meta: { adminOnly: true } }, ...]

As you can see in the route definition, when accessing reporting the user needs to have admin permissions, which is a property in a vuex store. The problem: This property is async and is of course false when initially accessing in the guard. How can I make my guard wait for it?

Guard:

if (to.matched.some(route => route.meta.adminOnly)) { if (store.getters.userInfo.isAdmin) { next() } else { next('/') } } else { next() }

I'm trying to debug why my site is failing to load properly on IE 11. On chrome my home page makes an api call (I'm using Laravel backend and Vuejs with axios in the front end) to fetch all the users however, when I load the page in IE 11 no users appear, no api call is made (in the network tab on the developer tools) and there are no errors showing in the developer tools console.

Can anyone give me any tips as to how I can start debugging this?

Any help would be much appreciated.

Thanks

In my vue-cli webpack project, I try to include mixin.scss and base.scss in my global index.scss. But it fails:

I am really confused. Is the syntax wrong?

I want to start the range from 0 instead of 1 in v-for="n in 10" which results in 1 2 3 .... 10 Is there a way to do it in Vuejs?

From the book:

To invoke a mutation handler, you need to call store.commit with its type: store.commit('increment')

Mutations must always be synchronous.

From the book:

Actions commit mutations ( can be asynchronous )

Actions are triggered with the store.dispatch method: store.dispatch('increment')

So it's action -> mutation -> new state most of the time.

So what's confusing me, is the very simple example, whereby I'm trying to show the asynchronous result of an object getTest

See this pen

Why can't Vue see that I'm not calling a mutation, but an action when the component loads?

I have been trying Vue.js with ASP.Net Core for the last week and it seems quite powerful. However, I have seen different approaches in the way how files are organized and modules written.

In the javascript spatemplate, they use, I would say this structure with ts, html, css files:

|_components |_counter *counter.ts *counter.css *counter.html

In other starter Vue.js templates, we have this structure with one single vue file:

|_components |_counter.vue

Is there a limitation/advantage in using one over the other? Is one being more recent and should superseed the other format?

I have also see that they are different way of writing component for Vue in Typescript.

The default one presented on the Vue website and the other way using the vue-class-component or the vue-property-decorator which looks more natural to me and is recommended on the Vue website as it seems to solve some issues: link.

Again if it is that good, why shouldn't it become the standard? Does the default style gives more flexibility compared with the 'vue-class-component' style?

Sorry for the basic questions, just trying to get the good directions from the beginning.

Thank you

Sylvain

im trying to use vuetify now, but i really confuse how to use it. I have used CDN, and copy-paste the html and javascript code from vuetify.js, but it doesnt work at all. It returned error uncaught SyntaxError: Unexpected token export. This is the html code:

<template> <v-card height="200px"> <v-bottom-nav absolute shift value="true" :class="{ 'blue-grey': e2 === 1, 'teal': e2 === 2, 'brown': e2 === 3, 'brown lighten-1': e2 === 4 }" > <v-btn dark @click.native="e2 = 1" :value="e2 === 1"> <span>Video</span> <v-icon>ondemand_video</v-icon> </v-btn> <v-btn dark @click.native="e2 = 2" :value="e2 === 2"> <span>Music</span> <v-icon>music_note</v-icon> </v-btn> <v-btn dark @click.native="e2 = 3" :value="e2 === 3"> <span>Book</span> <v-icon>book</v-icon> </v-btn> <v-btn dark @click.native="e2 = 4" :value="e2 === 4"> <span>Image</span> <v-icon>image</v-icon> </v-btn> </v-bottom-nav> </v-card> </template> and javascript code: <script> export default { data () { return { e2: 3 } } } </script>

my question is just how to run a Vue method one time on mouseover, rather than running it both on mousein and on mouseout.

For example here is the template I am using in Vue, where I am looping through some data and I want a method called showSkill() to fire only once, where it is currently firing both on mousein/mouseout:

<div class="col-md-3" v-for="skill in skills" :key="skill.id"> <label :for="skill.nickname">{{ skill.name }}</label> <div :id="skill.nickname" @mouseover="showSkill(skill)"></div> </div>

Here is the method:

showSkill(skill) { jQuery(`#${skill.nickname}`).empty() this.drawDonutChart(`#${skill.nickname}`, (skill.level/100).toFixed(2) * 100, 200, 200, '.35em') },

I think this is an event issue more than a Vue issue. Any suggestions would be greatly appreciated!

After asking a few questions on here and confirming that js does not pass references, only values, the question becomes, how do you make dynamic decision making. Let me explain. Right now i use many switch statements in a complicated form i am creating. But i would like to create an array that has many objects that contain the condition to be met and the variable or function to execute. The way i achieve this right now is to name the variable in plain text and execute it in brackets like so: this[nameofvar] = false where 'nameofvar' is the string store in the array object. This to me is bad on so many level and hackish.

So how do you do it?