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] React/Vue (Or any other similar framework) MPA implementation

when new to React and vue.js frameworks. when learning how to build simple SPA from courses, but there are no courses for MPA/SPA.

For example when I need website with 3 parts: Registration form, Login form, Dashboard

I don’t want to use SPA and Router. to have those 3 sections served by back-end as 3 different websites. If you asking why, it is because I see this technique on almost every React/vue.js powered websites (Instagram, AirBnB, Qualitista, …)

Can you please explain to me what is best practice and how to implement this and if its worth making? Or am I supposed to just make backend API + SPA no matter what.

Solution :

I don’t know too much about this topic in particular. But after a little searching, this Universal Multi-Page React App looks like it might be a tutorial to do what you’re interested in? Also found a little info in this Reddit post about Multi-page React Sites.

Also here’s some info about how Vue.js does it from I’mOnlyVueman with a couple articles I found on the topic.

Companies use server-side rendering or preloading to bypass the
limitations of vue.js with regard to SEO. Google cannot crawl Vue
components, so serving them from the server allows them to be indexed
before rendering.

Vue.js Server Side Rendering Guide
Server Side Rendering from the Vue.js docs

If you were to ask me a good example to learn multiple page apps I wouldn’t go to React/vue.js to do this, I’d use MVC. Microsoft has tons of tutorials if you’re interested. Create a web app with ASP.Net Core and MVC

Hope this helps!

[Vue.js] how can Include bootstrap.min.js from node modules in vue cli

i’m using vue.js cli . there is installed bootstrap using npm install bootstrap command. there is successfully imported @import “../node_modules/bootstrap/dist/css/bootstrap.min.css” ; on vue.js component but when i include script <script src=”../node_modules/bootstrap/dist/js/bootstrap.min.js”></script> on index.html before closing body tag its not working.

Solution :

Import the bootstrap js file just in main.js just like you did with the css file. So add import ‘bootstrap’ to the main.js.

[Vue.js] How to get user's list in firebase auth

when working on the vue-firebase application and want to know that how can I get the list of all registered users in firebase auth.

Solution :

when quite not sure if that is possible with one user try to get all the users, unless you are using firebase-admin. Though there is an idea how you can do that if you trying to get a list of added user being another user.
So, try to keep another list when a new user logs in, add the user details to a new node like userList.
And when ever you need them, call that node.
And incase you are using firebase-admin

admin.auth().listUsers(1000, nextPageToken)
.then(function(listUsersResult) {

will give the list.
Here’s a reference. https://firebase.google.com/docs/auth/admin/manage-users#list\_all\_users

[Vue.js] How to fix an array input value with Laravel / Vue JS

This is a Laravel 5 project.
there is a standard form being submitted. when trying to send the ID’s of each account clicked from the results of the search function added within the vue.js component.

The details clicked are then stored in a hidden form input called ‘grantedUsers’. This has the ability to store more than one value. So I’ve used the name grantedUsers[].

Upon submitting the form to the backend, I’ve DD’ed the value and it’s showing all the values but in one index instead of separate indexes for each. Making it way more difficult to process data efficiently.

I’m obviously submitting the value incorrectly to the hidden input. Any assistance would be appreciated in splitting each ID into separate indexes.

Code

<input type=”hidden” name=”grantedUsers[]“ :value=”hiddenData”>

//hiddenData is an empty array at initialisation.
data() {
return {
keywords: null,
results: [],
granted: [],
hiddenData: []
};
},

addUser(result) {
this.granted.push(result);
this.results.splice(this.results.indexOf(result), 1);

this.hiddenData.push(result.id);
},

removeUser(grantee) {
this.results.push(grantee);
this.granted.splice(this.granted.indexOf(grantee), 1);

this.hiddenData.splice(this.hiddenData.indexOf(grantee.id), 1);
}

//The backend is outputting this on the DD
array:1 [
0 => “1,2”
]

I’m trying to make it out

array:2 [
0 => “1”
1 => “2”
]

Solution :

Adding [] to the name of an input field is only useful when you have multiple input fields with this name. It does not convert the value of a single field to an array.

So you can just remove the [] from the name and do a simple explode on the string to make it an array.

dd(explode(‘,’, $request->grantedUsers));

[Vue.js] Vuejs get component HTML and send it via ajax POST

to send email with HTML body, but I don’t have access to server code, I can only send the email content via ajax.
The server already has API to send email.

there is the component invoiceEmail rendered on the fly.

sendEmail () {
const mailConfig = {
to : 'johndoe@example.com‘,
subject : ‘the Invoice’,
// body : this.$refs.invoiceEmail.$el, // this doesn’t work
// I’m getting error “converting circular structure to json”
body : ‘<strong style=”color:red;”>red bold</strong>’, // this works
}
this.$api.POST(‘send-email’, mailConfig)
.then(response => {})
.catch(error => {})
.finally(() => {})
},
}

If I fill body with HTML as string: ‘<strong>this should be bold</strong>’, it works as expected. So if I can just get the HTML, I’m sure the code will work.

This is console.log(this.$refs.invoiceEmail.$el)

What should I use to get the plain HTML instead of this.$refs.invoiceEmail.$el ??

Solution :

You can do this.$refs.yourRef.$el.innerHTML which returns you the inner HTML as a string.

Also just to expand this answer a little bit: this.$refs.yourRef.$el returns a raw DOM object, just as you would have as if you’d do document.getElementById(‘myelement’) with raw Javascript.

https://developer.mozilla.org/en-US/docs/Web/API/Element

Solution 2:

EDITED:

Try parsing it like so this.$refs.invoiceEmail.$el.toString(). this will not work

@Flame is correct, .innerHTML will work.

[Vue.js] axios mock can't handle default headers when using jest

I’m making a test that includes an axios call to an endpoints. to mock out the call to the endpoint and return some custom data so that I’m not hitting a server everytime I’m testing.

Here is the code for the action that is in it’s own action.js file.

login ({commit}, user) {
return new Promise((resolve, reject) => {
axios.post(‘https://backendauth.free.beeceptor.com/api/login', user)
.then(resp => {
console.log(‘response here’)
console.log(resp)
console.log(resp.data)
const token = resp.data.success.token
const user = resp.data.user
localStorage.setItem(‘token’, token)
axios.defaults.headers.common[“Authorization”] = “Bearer “ + token;
commit(‘LOGIN_SUCCESS’, token, user)

When logging in the action calls out to an endpoint and that endpoint returns a token which is stored in local storage. The token is also appended to the axios default headers so I don’t have to attach the token everytime to make an axios call in the application.

Now to the test. I’ve written a test that sucessfully mocks the axios post however fails with an error when setting the default headers for the mock.

Here is the error

TypeError: Cannot read property ‘headers’ of undefined

37 | const user = resp.data.user
38 | localStorage.setItem(‘token’, token)
\> 39 | axios.defaults.headers.common[“Authorization”] = “Bearer “ + token;
| ^
40 | commit(‘LOGIN_SUCCESS’, token, user)
41 | resolve(resp)
42 | })

Here is the test including the mock

import actions from “../../src/store/actions”;

let url = “”;
let body = “”;

jest.mock(“axios”, () => ({
post: (_url, _body, config) => {
return new Promise((resolve) => {
resolve({‘data’ : {‘success’: {‘token’ : ‘test’}})
})
},

}))

describe(‘login action’, () => {
it(“let the user login and access login success mutator”, async() => {
const commit = jest.fn()
const username = ‘test’
const password = ‘test’

await actions.login({commit}, {username, password})
})
})

The jest mock is a full mock which returns a promise when called, with the data I need, however the code fails when trying to set the headers. Is there a way I can mock this out as well or do I need to write the mock in a different way?

Solution :

Here is how you do it for anyone with the same problem. Npm install axios-mock-adapter and then use the following code but change it for the needs.

import actions from “../../src/store/actions”;
import axios from ‘axios’;
import MockAdapter from ‘axios-mock-adapter’;
describe(‘login action’, () => {
it(“let the user login and access login success mutator”, async() => {

let mockAdapter = new MockAdapter(axios);

mockAdapter.onPost(‘https://hotel-dev.devtropolis.co.uk/api/apilogin').reply(200, {
token: ‘test token’,
user: {username: ‘test’, password: ‘test’}
});

const commit = jest.fn()
const username = ‘test’
const password = ‘test’

await actions.login({commit}, {username, password})

expect(axios.defaults.headers.common.Authorization).toBe(‘Bearer test token’)

expect(commit).toHaveBeenCalledWith(
“LOGIN_SUCCESS”,’test token’, {username, password})
})

})

[Vue.js] Vue syntax rendered after page load

when a newbie in Vue.js. when currently using Vue.js on top of asp.net core.

I noticed that in 99% time page is served before Vue.js syntax is rendered. How can I prevent this from happening?

For example

When page load first I see

<ol>
<li v-for=”u in subscribers”>{ u.name } - {u.email}</li>
</ol>

And then after split of a second I see

<ol>
<li>John - john@domain.com</li>
<li>John1 - joh1n@domain.com</li>
</ol>

Solution :

Since the template is written inside the page HTML code it will always be shown first by the browser when its loading the page. Usually vue.js components include a template which is used to render the data and this wont happen.

You can take the template that is written on the page and add it to the vue.js component so it will use it to render, not the contents of the page. The simplest way is to just add the template as a parameter to the vue.js component, but later on it may be better to use separate template files, or Single File Components which may take a bit more work.

[Vue.js] How configure router-view default page in index.js while using vue.js

In my project, I use vue.js 2.9.

there is detail.vue.js page, some html code is like:

<div class=”tab”>
<div class=”tab-item”>
<router-link to=’/goods’ >goods</router-link>
</div>
<div class=”tab-item”>
<router-link to=’/ratings’ >ratings</router-link>
</div>
<div class=”tab-item”>
<router-link to=’/seller’ >seller</router-link>
</div>
</div>
<keep-alive>
<router-view ></router-view>
</keep-alive>

And the index.js content is like:

export default new Router({
routes: [{
path: ‘/‘,
name: ‘Home’,
component: Home
},
{
path: ‘/detail’,
name: ‘Detail’,
component: Detail,
children: [{
path: ‘/goods’,
name: ‘Goods’,
component: Goods
},
{
path: ‘/ratings’,
name: ‘Ratings’,
component: Ratings
},
{
path: ‘/seller’,
name: ‘Seller’,
component: Seller
}]
}]
})

The problem is the result of router-view after opening detail.vue.js page is Home, but not goods.

The default router-view result of openning detail.vue.js page should be goods, not the home page.

there is added content in detail.vue

components: {
‘v-header’: header,
‘v-goods’: goods
},
routes: [{
path: ‘/‘,
name: ‘goods’,
component: goods
}]

and i added content in App.vue

<script type=”text/ecmascript-6”>
import Home from ‘@/components/home/Home’
export default {
name: ‘App’,
routes: [{
path: ‘/‘,
name: ‘Home’,
component: Home
}]
}
</script>

But unlucky, it failed again. it showed nothing when open detail.vue. How to configure the index.js? who can help me?

Solution :

According to the question, you should use children property in the routes as follows:

routes: [{
path: ‘/‘,
name: ‘Home’,
component: Home
},
{
path: ‘/detail’,
name: ‘Detail’,
component: Detail,
children: [
{
path: ‘/ratings’,
name: ‘Ratings’,
component: Ratings
},
{
path: ‘/seller’,
name: ‘Seller’,
component: Seller
},
{
path: ‘/goods’,
name: ‘Goods’,
component: Goods
}]
}]

and also you should specify < router-view > in app.vue.js for the default route(Home) and in detail.vue.js specify < router-view > for the route specific to that particular component as shown above. No need to change the template you mentioned over here.

[Vue.js] Ignore some properties in a deep watch for VueJs

I’m working on an autosave feature for a vue.js app that sends data to api every time a change is made to the vue.js app data. Is it possible to ignore certain properties of an objected when using a vue.js watch? The object has multiple values that to watch to auto save and only 1 or 2 that would be ignore so it doesn’t seem to make sense to set up a watch function for all the properties but instead just ignore the 1 that I don’t.

This is the basic structure of the data:

data:{
template: {
name: “Template”,
id: 1,
variables: [
{
name: “v1”,
color: “#fff”,
group: 1,
isSelected: true
},
{
name: “v2”,
color: “#fff”,
group: 3,
isSelected: false
}
]
}
}

and the basic watch function:

watch: {
template: {
handler: function(){
this.save();
},
deep: true
}
}

The isSelected field for the variables in the template are used for UI purposed only and I would like the watch to ignore that field changing because they don’t get saved. I don’t want to have to set up a watch function for every field in variables but instead do something in the watch like:

ignore: “template.variables.isSelected”

Solution :

You can’t get old value for mutation object so I think creating some helper data as below temp(save old data) will help the problem .Then check old and new data ….

var app = new Vue({
el: “#app”,
data:{
a: 1,
template: {
name: “Template”,
id: 1,
variables: [
{
name: “v1”,
color: “#fff”,
group: 1,
isSelected: true
},
{
name: “v2”,
color: “#fff”,
group: 3,
isSelected: false
}
]
},
temp: {}
},
mounted: function() {
// this.template.variables[0].isSelected = false;
this.temp = JSON.parse(JSON.stringify(this.template));
this.$set(this.template.variables[0],”isSelected”, 222);

},
watch : {
template: {
handler: function(changeVal) {
var flag = true;
for(var i in changeVal.variables) {
if(changeVal.variables[i].isSelected != this.temp.variables[i].isSelected) {
flag = false;
}
}
this.temp = JSON.parse(JSON.stringify(this.template)); // assign changed data as old data again for next process
if(flag) console.log(“saveData”);// this.save();
else console.log(“notsave”);
},
deep: true
}
}
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”></div>

[Vue.js] Dropzone is not defined when used inside a component

Im currently trying to import vue2-dropzone into my Laravel project so it is using Laravel mix.

when importing it in my bootstrap.js as below:

import vueDropzone from “vue2-dropzone”;
Vue.component(‘vueDropzone’, vueDropzone)

I then want to be able to use in one of my components which is inside a file called “CreatePersonalExpense.vue”. This component is accessed using vue.js router.

Below is a snippet of how it is being used in my component:

<template>

<div class=”form-row py-2”>
<div class=”col-md-12”>
<h4>Upload</h4>
<vue-dropzone v-on:vdropzone-sending=”sendingFiles” id=”drop1” ref=”myVueDropzone” @vdropzone-complete-multiple=”afterAllFilesUploaded” :options=”dropOptions”></vue-dropzone>
</div>
</div>

</template>

<script>
export default {

data() {
return {
type: “personal”,
id: “”,
total: “”,
files: {
},
dropOptions: {
url: ‘/api/expenses/files’,
autoProcessQueue: false,
uploadMultiple: true,
headers: { “x-csrf-token”: document.querySelector(‘meta[name=”csrf-token”]‘).getAttribute(‘content’) },
params: {}
},
errors: new Errors(),
form: new Form(),
}
},

components: {
vueDropzone
}
}
</script>

However the dropzone is not recognised and I get the error:

Uncaught ReferenceError: vueDropzone is not defined

However if I were to import the dropzone directly into this vue.js component by putting import vueDropzone from “vue2-dropzone”; at the beginning of the script tag, dropzone works fine. Why can’t I just include it in the bootstrap.js file and have it work for there?

Solution :

Try defining as below =>

Vue.component(‘vue-dropzone’, vueDropzone)

Solution 2:

If you already register vueDropzone in bootstrap.js, you don’t need to register it again in the component. You should remove this in CreatePersonalExpense.vue

components: {
vueDropzone
}

vueDropzone is an undefined variable. Just remove it and it should work.