I run the axios get method to call php script.but request send twice
how to solve this problem.
myfunction:-

axios.get(‘http://13.233.179.174/customers\_log.php',{
headers: {
‘Access-Control-Allow-Origin’: ‘*‘
},
})
.then(function (response) {
$(“#spinner”).hide();
console.log(‘this is response work’);
console.log(response.data);
})
.catch(function (error) {
$(“#spinner”).hide();
console.log(error);
})

Solution :

It’a Preflight request

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

Check here - https://developer.mozilla.org/en-US/docs/Glossary/Preflight\_request

I need to access items using vue’s this.$refs but not sure how to achieve it. I don’t want to use jQuery for this.

<template>
<div>
<svg ref=”svgItem”>
<path d=”M899.33,118.33h-81.7v90.2h-31.3V2.07h31.3v88.5h81.7V2.07h31.29V208.53H899.33Z” />
</svg>
</div>
</template>

<script>
import { TimelineLite } from ‘gsap’;

export default {
mounted() {
const { svgItem } = this.$refs;
const timeline = new TimelineLite();
timeline.to(svgItem, 5, { opacity: 0.3 });
// timeline.to(‘${svgItem} > path’, 5, { opacity: 0.3 }); // something like this :)
},
};
</script>

I know how to do it with jQuery:

const svgPath = $(‘#parent path’);
// or may be with:
const svgPath = $(‘#parent’).find(‘path’);

I kinda feel that I may end up with querySelector but not sure how to mix and match variable and string:

const { svgItem } = this.$refs;
const selector = document.querySelector(svgItem > ‘path’) // something like this :)

const timeline = new TimelineLite();
timeline.to(selector, 5, { opacity: 0.3 }

Thank You.

Solution :

Method querySelector is also on HTML Element. It’s not only available on document.

const { svgItem } = this.$refs;
const svgPath = svgItem.querySelector(‘path’);

<div id=”component-navbar” :class=”hasBackground”>

computed: {
hasBackground() {
if (window.scrollY > 0) {
return ‘has-background’
}
}
}

there is a sticky nav bar and to add a background if the page scroll is greater than 0. The problem is, hasBackground

doesn’t get recalculated as the scroll changes
on page refresh window.scrollY is always zero, even though the page is scrolled
works only with hot reload when I make a change to a file.

How do I do this?

Solution :

The window object cannot be observed properly in vue. You can learn more about vue’s reactivity here: https://vuejs.org/v2/guide/reactivity.html

I thought that it might be possible to proxy the window object in vue.js data, but I believe this actually creates a new object with getters/setters for existing property names, meaning that the new data you create by doing this would not be reactive to changes to the original window object, so the only real option is to watch for events unfortunately.

Solution 2:

As @obermillerk said:

The window object cannot be observed properly in vue.

So you have 2 options:

Read window.scrollY when the component is initialized.
Add window.addEventListener(‘scroll’, …, { passive: true }).

Read window.scrollY when the component is initialized

Vue.component(‘component-navbar’, {
computed: {
hasBackground () {
console.log(‘window.scrollY’, window.scrollY)
if (window.scrollY > 0) {
return ‘has-background’
}
}
},
template: ‘<nav :class=”hasBackground”></nav>’
})

const app = new Vue({
el: ‘#app’
})

#app {
min-height: 110vh;
}
nav {
min-height: 50vh;
}
nav.has-background {
background: linear-gradient(red, orange);
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id=”app”>
<component-navbar></component-navbar>
</article>

Add window.addEventListener(‘scroll’, …, { passive: true })

Vue.component(‘component-navbar’, {
data () {
return {
isScrolled: false
}
},

computed: {
hasBackground () {
if (this.isScrolled) {
return ‘has-background’
}
}
},

template: ‘<nav :class=”hasBackground”></nav>’,

mounted () {
window.addEventListener(‘scroll’, this.setIsScrolled, { passive: true })
this.setIsScrolled()
},

destroyed () {
window.removeEventListener(‘scroll’, this.setIsScrolled, { passive: true })
},

methods: {
setIsScrolled () {
this.isScrolled = window.scrollY > 0
}
},
})

const app = new Vue({
el: ‘#app’
})

#app {
min-height: 110vh;
}
nav {
min-height: 50vh;
}
nav.has-background {
background-image: linear-gradient(red, orange);
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id=”app”>
<component-navbar></component-navbar>
</article>

when new to Nuxt.js, learning by developing a pilot project where in two different route, I included two different demo templates.

For that, I needed different js libraries and css to be included!

Here is how I did include into nuxt.js file!

link: [

// vendor
{
rel: ‘stylesheet’,
href: ‘/vendor/css/bootstrap.min.css’
},

{
rel: ‘stylesheet’,
href: ‘https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'
},
{
rel: ‘stylesheet’,
href: ‘https://use.fontawesome.com/releases/v5.1.0/css/all.css'
},
{
rel: ‘stylesheet’,
href: ‘https://fonts.googleapis.com/css?family=Slabo+27px'
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/bootstrap.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/owl.carousel.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/owl.theme.default.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/style.css’
},

// retail
{
rel: ‘stylesheet’,
href: ‘/retail/css/bootstrap.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/retail/style.css’
},
{
rel: ‘stylesheet’,
href: ‘//fonts.googleapis.com/css?family=Lato:400,700%7CMontserrat:300,400,600,700’
},
{
rel: ‘stylesheet’,
href: ‘/retail/icons/fontawesome/css/fontawesome-all.min.css’
},{
rel: ‘stylesheet’,
href: ‘/retail/icons/Iconsmind__Ultimate_Pack/Line%20icons/styles.min.css’
},
],

script:[

// vendor
{ src: ‘vendor/js/jquery-3.3.1.slim.min.js’, body: true },
{ src: ‘vendor/js/popper.min.js’, body: true },
{ src: ‘vendor/js/bootstrap.min.js’, body: true },
{ src: ‘vendor/js/owl.carousel.min.js’, body: true },
{ src: ‘vendor/js/custom.js’, body: true },
{ src: ‘vendor/js/custom-vendor.js’, body: true },
{ src: ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', body: true },

// retail

{ src: ‘retail/js/libs/jquery-3.3.1.min.js’, body: true },
{ src: ‘retail/js/libs/popper.min.js’, body: true },
{ src: ‘retail/js/libs/bootstrap.min.js’, body: true },
{ src: ‘retail/js/navigation.js’, body: true },
{ src: ‘retail/js/jquery.flexslider-min.js’, body: true },
{ src: ‘retail/js/jquery-asRange.min.js’, body: true },
{ src: ‘retail/js/circle-progress.min.js’, body: true },
{ src: ‘retail/js/afterglow.min.js’, body: true },
{ src: ‘retail/js/script.js’, body: true },
{ src: ‘retail/js/script-dashboard.js’, body: true }
]

Here is my directory Structure of Pages:

pages
| retail
| bank.vue
| index.vue
| info.vue
| vendor
| index.vue
| index.vue

Here is my directory Structure of Static folder where I included all my js libraries and css files:

static
| retail
| css
….
| icons
….
| images
….
| js
| jquery-3.2.1.slim.min.js
….
| style.css
|
| vendor
| css
….
| images
….
| js
| jquery-3.3.1.slim.min.js
….
| style.css
….

Thus when expecting to go ‘/vendor’ and load vendor stuffs, and same as the ‘/retail’.

But whenever page ‘vendor’ or ‘retail’ any of one page loads, all the javascript libraries are called in the following route:

Request URL: http://localhost:3000/vendor/vendor/js/jquery-3.3.1.slim.min.js

where it should be called in
Request URL: http://localhost:3000/vendor/js/jquery-3.3.1.slim.min.js
not /vendor/vendor/…

Thus it produces 404 Not Found error. How do I solve it ?

Solution :

You should use absolute path in the src tag then. E.g.

{ src: ‘/vendor/js/jquery-3.3.1.slim.min.js’, body: true },

PS its bad idea to mix jquery and vue/nuxt

when learing vue.js with laravel.
to display message in the input tag with v-model, but it’s not working.

<div class=”card” id=”myAppId”>
<p>@{ message }</p>
<input type=”text” v-model=”message” class=”form-control”>
</div>

<script src=”{ asset(‘js/vue.js’) }”></script>
<script>

new Vue({
el: “#myAppId”,
data: {
message : ‘Hello vue.js Js’
}
});

</script>

It display only <p>@{ message }</p> with an empty input field.

Solution :

You can just initialize that v-model variable with the initial value.
This should achieve what you are looking for:

data: {
message: ‘initial_message’,
}

to show a counter on remaining time in vuejs. when using flip-countdown library of vue. to pass remaining_time prop value to attribute of html code.

Html:

<flip-countdown deadline=remaining_time></flip-countdown>

Script:

<script>
import FlipCountdown from ‘vue2-flip-countdown’
export default {
components: { FlipCountdown },
props: [‘id’],

data(){
return {
items:{},

remaining_time:”2019-12-25 00:00:00”,

}
},
</script>

to pass this remaining_time above to the html attribute as value but this code is not working. Please guide how to pass remaining_time value to above attribute deadline in html.

Solution :

Right,

<flip-countdown :deadline=”remaining_time”></flip-countdown>

is correct answer.

Please be sure the are using right format for date-time YYYY-MM-DD HH:mm:ss

Here is an example
https://github.com/philipjkim/vue2-flip-countdown/blob/master/demo/src/App.vue

Solution 2:

You must bind it to the attribute:

<flip-countdown v-bind:deadline=”remaining_time”></flip-countdown>

or simply:

<flip-countdown :deadline=”remaining_time”></flip-countdown>

when mapping getters from my Vuex store as a computed property and want to manipulate the property (its an array of objects) before using it in the component template. Any idea how I can do that?

there is tried watching the computed property but that doesn’t work.

import {mapGetters} from ‘vuex
computed: {
…mapGetters([
‘property’
])
}

Solution :

You can use the getter in another custom property like you will do for a simple variable :

<template>
<div>
<div v-for=”item in transformedItems” :key=”item”>{item}</div>
</div>
</template>

<script>
import { mapGetters } from ‘vuex’

export default {
computed: {
…mapGetters([‘items’]),
transformedItems() {
return this.items.map(item => item.name)
}
}
}
</script>

And then you can use transformedItems in the template

actually i just learn about Vue.js and there is some knowledge using Laravel. to combine both of them, im searching for tutorials on internet and i found 2 kind of combination.

the first one is they separate Laravel and Vue, and the second one they combine both of them in Laravel Directory. Which one is the best for use guys? and can you guys tell me what is the benefits of each other? thank you so much.

Solution :

These are different types of frameworks. You can build a nice UI independently. Yes, you can use both together. In the case, the Laravel will be API backend.

That don’t have to be SSR. A Vue.js project can work with any API backend if you can. For example, you have developed a CRM front-end. Its backend can develop using Laravel or .NET Core. vue.js doesn’t care about it.

If the returned results are the same, you don’t need to spend more effort.

What’s the SPA?

A single-page application works in the browser and requires no page reloads and no extra time for waiting. The page doesnt need to be updated since the content is downloaded automatically.

You already use these types of applications every day. Twitter, Trello, Facebook, Gmail, etc.

Actually, if the project needs to Vue.js, use it. In this case, you should ask this question yourself, “Why do we need a Single Page Application?”.

The answer to the second question, yes you can. But you don’t need to put them to the same directory.

As I said, benefits depend on the project’s needs. Enterprise applications are could want to have different microservices, layers, etc.

Laravel and similar frameworks helping these kinds of needs.

I hope these pieces of information could help you.

Why do we need a Single Page Applications

Single-page application vs. Multi-page application

Single Page Application: advantages and disadvantages

in my Vuejs app, am trying to send an HTTP post to my server and I keep getting this error in the console,

TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.post is not a function
at Object.coursePix (services.js?87e7:5)
at VueComponent._callee$ (testCourse.vue?8c89:98)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:271)
at Generator.prototype.(anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (asyncToGenerator.js?3b8d:5)
at _next (asyncToGenerator.js?3b8d:27)
at eval (asyncToGenerator.js?3b8d:34)
at new Promise (<anonymous>)
at new F (_export.js?63b6:36)

in the api.js which contains the server URL and the header which was set with axios interceptor

here is the api.js

import axios from ‘axios’

export default () => {
const ajax = axios.create({
baseURL: `http://localhost:8081/\`
})

ajax.CancelToken = axios.CancelToken
ajax.isCancel = axios.isCancel

ajax.interceptors.request.use(
(config) => {
let token = localStorage.getItem(AUTH_TOKEN)
if (token) {
config.headers[‘Authorization’] = `Bearer ${ token }`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
return ajax
}

here is the services.js

import api from ‘@/api’

export default {
coursePix (credentials) {
return api.post(‘coursePix’, credentials)
}
}

and the upload.vue

async AddCourse(){
const formData = new FormData()
formData.append(‘file’, formData)
var obj = {
send: ‘send’
}
try{
await services.coursePix(obj)
}
catch(err){
console.log(err)
}
}

I tried everything I could but it’s not working, how can I solve this issue or what am I doing wrong

Solution :

Seems like you didnt retrieve the ajax instance:

return api.post(‘coursePix’, credentials)

instead of:

return api().post(‘coursePix’, credentials)

there is a vue.js code where i do some actions based on this.$refs.form.validate
I wanted to write a test for it …But not sure how can i mock this.$refs.form.validate? there is written only basic ones..can someone point me at right direction?when using Vue+Jest

methods: {
sayHello () {

if (this.$refs.form.validate()) {
//code goes here
}

Is there a way to make it return false and true?

Solution :

You need to use jest method jest.fn() to mock the function. Like so const foo = jest.fn(). And the you need to test, if this fn has been called.