link1644 link1645 link1646 link1647 link1648 link1649 link1650 link1651 link1652 link1653 link1654 link1655 link1656 link1657 link1658 link1659 link1660 link1661 link1662 link1663 link1664 link1665 link1666 link1667 link1668 link1669 link1670 link1671 link1672 link1673 link1674 link1675 link1676 link1677 link1678 link1679 link1680 link1681 link1682 link1683 link1684 link1685 link1686 link1687 link1688 link1689 link1690 link1691 link1692 link1693 link1694 link1695 link1696 link1697 link1698 link1699 link1700 link1701 link1702 link1703 link1704 link1705 link1706 link1707 link1708 link1709 link1710 link1711 link1712 link1713 link1714 link1715 link1716 link1717 link1718 link1719 link1720 link1721 link1722 link1723 link1724 link1725 link1726 link1727 link1728 link1729 link1730 link1731 link1732 link1733 link1734 link1735 link1736 link1737 link1738 link1739 link1740 link1741 link1742 link1743 link1744 link1745 link1746 link1747 link1748 link1749 link1750 link1751 link1752 link1753 link1754 link1755 link1756 link1757 link1758 link1759 link1760 link1761 link1762 link1763 link1764 link1765 link1766 link1767 link1768 link1769 link1770 link1771 link1772 link1773 link1774 link1775 link1776 link1777 link1778 link1779 link1780

[Vue.js] rejected HTTP promise doesn't hit catch block

I use VueJs (and Vuex) with Axios to communicate with an Express Api. I can delete my own user account consuming a service

import api from ‘@/services/api.js’;

export default {
deleteAccount: () => api().delete(‘/users’)
};

where api is the axios instance. I don’t need to pass in a user ID because the api identifies the user by the token.

Within my settings view I can consume this service

<script>
import { mapActions } from ‘vuex’;

import UserService from ‘@/services/users’;

export default {
name: ‘Settings’,
methods: {
…mapActions(‘alert’, [
‘showSuccessAlert’,
‘showErrorAlert’
])
deleteAccount: async function() {
try {
await UserService.deleteAccount();

this.showSuccessAlert({ message: ‘Account was deleted successfully’ });
// other stuff
} catch (error) {
this.showErrorAlert({ message: error.message });
}
}
}
};
</script>

Calling UserService.deleteAccount() returns me a pending promise. Using await returns me the api response.

Currently the api always returns a 500 for testing purposes. I thought, that if the Promise gets rejected the code will always jump directly into the catch block. Here, the code returns a rejected Promise (and writes a “Internal Server Error” to the console but passes and shows a success alert / never executes the code from the catch block.

What is wrong with the code? Did I misunderstand promises?

Update

My axios instance

import axios from ‘axios’;

import TokensService from ‘@/services/tokens.js’;
import store from ‘@/store/store.js’;

function getTokenString() {
return `Bearer ${TokensService.getToken()}`;
}

export default () => {
const instance = axios.create({
baseURL: ‘http://localhost:3000/',
headers: {
‘Content-Type’: ‘application/json’,
Authorization: getTokenString(),
},
});

instance.interceptors.request.use((config) => {
config.headers.Authorization = getTokenString();
return config;
}, (err) => Promise.reject(err));

instance.interceptors.response.use((res) => res, (err) => {
if (err.response.status === 401) {
store.dispatch(‘authentication/destroySession’);
store.dispatch(‘alert/showErrorAlert’, { message: err.message });
}

return err;
});

return instance;
};

Calling api().delete() is the same as axios.delete(‘http://localhost:3000/users')

Solution :

try returning a rejected promise here

instance.interceptors.response.use((res) => res, (err) => {
if (err.response.status === 401) {
store.dispatch(‘authentication/destroySession’);
store.dispatch(‘alert/showErrorAlert’, { message: err.message });
}

return Promise.reject(err);
});

as per examples https://github.com/axios/axios#interceptors

[Vue.js] how to make loading/loader in vue during POST method

there is test to make loader when fetching data with method GET, it was succesfully but when on POST method, it was failed ? what is a good way to make loader during POST data ?
when on GET method, i make loader to be true and when it finish fetch data it gonna be false again, that is for GET

but when on POST method, i try something like that , make the loader to be true before post, but it was failed :(
is there any example ? without the plugins or component :), to make own loader :D

Solution :

when guessing you are using a method to make the POST request, so when the method gets called, make the loader boolean true then in the fetch() or axios in the then() block make the boolean false so the logic is, when the submit button is pressed, it calls the method which starts the loader and when the POST request has been completed, the loader is set to false, you could also stop the loader in the error block if you are catching for errors.

[Vue.js] Make Request before Page Unload

when working on single page vue.js application.

In this application, when using firebase realtime database for storing users.

I just want to update users ‘isOnline’ state on firebase, before page unload.

So, to make http request. Is it possible ?

Below code not do the trick…

new Vue({
created(){
window.onbeforeunload = function() {
apiservice.update(this.user);
return null
};
},
}

Solution :

You can try :

new Vue({
created () {
window.addEventListener(‘beforeunload’, this.updateUser)
},
methods: {
updateUser () {
console.log(‘updating user’)
}
}
})

[Vue.js] Plain history.pushState or replaceState functions doesn't work in vue project

I use history.replaceState or history.pushState in my own project which written by vue.js, why they don’t work.
Actually, I can saw the url address has changed in address-bar: from ‘location:3030/#/a’ to ‘location:3030/#/b’, but sadly current page doesn’t change.

history.pushState({key: 641.928}, ‘’, ‘http://localhost:3030/#/a');

I expect that page a would jump to new page b;

Solution :

history.pushState will not modify the page, only the url. If you want to navigate to a new page and reload you can use window.location.href=”http://localhost:3030/#/a". This will reload the page.

If you do not want to reload the page you must first change the page content manually (vue.js makes this easy), and then call history.pushState to change the URL.

[Vue.js] How to use regex to match specific words in a route in nuxtjs, vue?

there is this route /test/a-vs-b

when trying to catch this route only if -vs- is found in it.

I tried a few regex variants, but nothing seems to work

routes.push({
name: ‘test’,
path: ‘/test/:page((.*)-vs-(.*))’,
component: resolve(__dirname, ‘test/b.vue’),
});

Any ideas?

Solution :

VueRouter uses the path-to-regexp library, which apparently doesn’t handle defining capturing groups with parenthesis like you’re trying to do.

I got it to work by simply removing the parenthesis surrounding the .*s.

routes.push({
name: ‘test’,
path: ‘/test/:page(.*-vs-.*)’,
component: resolve(__dirname, ‘test/b.vue’),
});

[Vue.js] Vue.js _this is not defined at eval Java Spring backend json request

vue.js.js:

created() {
axios.get(‘/people’)
.then((response) => {
this.people = response._embedded.data.people
})
.catch((error) => {
console.log(error)
})
},

GET request response according to chrome network: https://pastebin.com/bDmKQFgB

Console log:

error
App.vue?234e:298 ReferenceError: _this is not defined
at eval (App.vue?234e:294)

The second line comes from the catch() part.

Where the json comes from: Java Spring Backend with mongodb like: https://spring.io/guides/gs/accessing-mongodb-data-rest/

Solution :

this is under a different context within the Axios promise. Try tying this to a variable outside of the Axios promise:

Codepen mirror: https://codepen.io/oze4/pen/EJWdLr

new Vue({
el: “#app”,
data: {
title: “”
},
methods: {
getData() {
this.title = “Loading…”;

/* ============================ */
/* THIS IS WHAT YOU NEED TO ADD */
/* ============================ */
var vm = this;
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

axios
.get(“https://jsonplaceholder.typicode.com/todos/1")
.then(function(response) {
/* IN USE: */
vm.title = response.data.title;
})
.catch(function(error) {
alert(error);
});
}
}
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id=”app”>
<button @click=”getData”>Click to load data from api</button>
<p>{ title }</p>
</div>

[Vue.js] vue - how do I add my prop value as a class value in the template?

How do I add my value of the prop thrID as a class value in the template?

thrID is passed in as my1value

<template>
<div v-bind:class=”[‘hhhhh’,thrID]“>
test {thrID}
</div>
</template>

<script>

export default {
name: ‘bottom’,
components: {

},
props:[“thrID”]
}
</script>

<style scoped>
.bottom {
background: yellow;
height: 30px;
width: 100%;
}
</style>

it renders

<div data-v-10e356bb=”” data-v-7ba5bd90=”” class=”hhhhh”>
test my1value
</div>

it to have a class like this

<div data-v-10e356bb=”” data-v-7ba5bd90=”” class=”hhhhh my1value”>
test my1value
</div>

Solution :

You can easily add custom classes by binding a string, array or object to the class attribute. You start of by using the v-bind or : syntax to bind a variable to the class attribute:

<template>
<div :class=”classes”>
<!– Magic! –>
</div>
</template>

Then, in our export component we can do several things. The most versatile option is to use an object. If the value of a key is truthy, that class is applied. If the value is falsy, it will not be applied. We use the [ keyName ]: value syntax to add this.thrID as a key to our object.

export default {
props: {
thrID: {
type: String,
required: true
}
},
computed: {
classes () {
return {
hhhhh: true,
[this.thrID]: true
}
}
}
}

Similarly, you can return an array:

classes () {
return [
‘hhhhh’,
this.thrID
]
}

Or you can create some string with classes:

classes () {
return `hhhhh {$this.thrID}`
}

[Vue.js] How to pass props from URL in vueJS when redirect in vue router?

My ‘/‘ path redirect to ‘/loading’ and I need to pass props like mysite/?demo=true and then that prop pass to the component attached to ‘/loading’

this is the router config

{
path: ‘/‘,
redirect: ‘/loading’,
},
{
path: ‘/loading’,
component: Loading
},

Solution :

Do:

{
path: ‘/‘,
redirect: { path: ‘/loading’, params: { default: true, demo: true } }
},
{
path: ‘/loading’,
component: Loading
},

And in the Loading component, you define a prop called demo, like:

props: {
demo: Boolean,
}

Then you will be able to access this.demo and read true, wich is the value passed via route.

Solution 2:

Building up on Mathew’s solution, to access the route parameter, you could do this.$route.params.demo

[Vue.js] How to import line-awesome framework into vue.js app?

I can’t import line-awesome framework and use its icons in vue.js application.

there is tried to add the CDN link in my html file as mentioned here.

When adding it, and trying to use its icons like

<i class=”la la-home”></i>

the webpage showing nothing, but when using

<i class=”fa fa-home”></i>

instead, the webpage show the font-awesome home icon, however when still importing the CDN of line-awesome.

Solution :

As it turns out, Line Awesome has very much an identity crisis. If you import the stylesheet as outlined in the installation page by putting it in the index.html file, it works correctly. However, the stylesheet will only define css for .fa and .fa-* icons. It does not work with .la and .la-* syntax as is suggested by their own documentation.

Things should work just fine if you use <i class=”fa fa-home”></i> like you figured out.

[Vue.js] How To Change WordPress REST API Taxonomy Orderby Parameter?

when trying to order taxonomies, being pulled by the WordPress REST API, by name. What I currently have is:

http://example.com/wp-json/wp/v2/categories?per\_page=100&orderby=name

So in theory what this should be doing is getting a list of the categories on the website, up to 100, and order those categories by their name.

When I do this however it gives me up to 100 categories using the per_page parameter, but when it seems to be ignoring the orderby parameter and I’m not sure why. It says that ‘name’ is an excepted option for the orderby parameter, but it is still ordering by the default order which is ID.

Is there something when doing wrong or a setting I need to turn on so I can use the orderby parameter with taxonomies?

Solution :

According to the documentarion the call is correct.

You can see it working here:

http://demo.wp-api.org/wp-json/wp/v2/categories?order=asc&orderby=name
http://demo.wp-api.org/wp-json/wp/v2/categories?order=desc&orderby=name

You should be looking an issue serverside (WordPress configuration, server configuration etc).

What version of WordPress are you using?