my question is pretty simple, i want to assign data in run time and get them again in vue instance
data() {
return {
panels:[],
};
},
created() {
this.fetchPanels();
//console.log(this) , i can find panels already assigned in this instance
//console.log(this.panels) , it gives me zero array
},
methods: {
fetchPanels() {
this.$http
.get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
.then(function(response) {
this.panels = response.body.data;
});
},
If you're going to use async/await (and I agree you should), you should do so for the http call as well. await somefunc().then() feels like bad mixing of styles. This has the advantage of also being shorter.
data() {
return {
panels:[],
};
},
async created() {
await this.fetchPanels();
console.log(this.panels);
},
methods: {
async fetchPanels() {
const response = await this.$http.get(Shared.siteUrl + "/api/" + this.category_title + "/panels")
this.panels = response.body.data;
},
Keep in mind that the Vue lifecycle does not wait on your async lifecycle hooks. This won't be a problem in this example, but it's definitely good to keep in mind. I.e., if you added
mounted() {
console.log(this.panels);
},
it would come up empty, because the async tasks in created() will now happen after mounted()
Your console.log(this.panels) will be called before the async request.
Also, Use arrow function instead.
data() {
return {
panels:[],
};
},
created() {
this.fetchPanels();
//console.log(this) , i can find panels already assigned in this instance
//console.log(this.panels) , don't use this here
},
methods: {
fetchPanels() {
this.$http
.get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
.then((response) => {
this.panels = response.body.data;
console.log(this.panels);
});
}
As developers suggested that, vue-resouce uses promise async tasks and to wait untill it gives its data
data() {
return {
panels:[],
};
},
async created() {
await this.fetchPanels();
console.log(this.panels)
},
methods: {
fetchPanels:async function() {
await this.$http
.get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
.then((response) => {
this.panels = response.body.data;
});
}
Related
I'm new to VueJs and currently trying to load some data only once and make it globally available to all vue components. What would be the best way to achieve this?
I'm a little bit stuck because the global variables occasionally seem to become null and I can't figure out why.
In my main.js I make three global Vue instance variables:
let globalData = new Vue({
data: {
$serviceDiscoveryUrl: 'http://localhost:40000/api/v1',
$serviceCollection: null,
$clientConfiguration: null
}
});
Vue.mixin({
computed: {
$serviceDiscoveryUrl: {
get: function () { return globalData.$data.$serviceDiscoveryUrl },
set: function (newUrl) { globalData.$data.$serviceDiscoveryUrl = newUrl; }
},
$serviceCollection: {
get: function () { return globalData.$data.$serviceCollection },
set: function (newCollection) { globalData.$data.$serviceCollection = newCollection; }
},
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) { globalData.$data.$clientConfiguration = newConfiguration; }
}
}
})
and in my App.vue component I load all the data:
<script>
export default {
name: 'app',
data: function () {
return {
isLoading: true,
isError: false
};
},
methods: {
loadAllData: function () {
this.$axios.get(this.$serviceDiscoveryUrl)
.then(
response => {
this.$serviceCollection = response.data;
let configurationService = this.$serviceCollection.services.find(obj => obj.key == "ProcessConfigurationService");
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
})
}
},
created: function m() {
this.loadAllData();
}
}
</script>
But when I try to access the $clientConfiguration it seems to be null from time to time and I can't figure out why. For example when I try to build the navigation sidebar:
beforeMount: function () {
let $ = JQuery;
let clients = [];
if (this.$clientConfiguration === null)
console.error("client config is <null>");
$.each(this.$clientConfiguration, function (key, clientValue) {
let processes = [];
$.each(clientValue.processConfigurations, function (k, processValue) {
processes.push(
{
name: processValue.name,
url: '/process/' + processValue.id,
icon: 'fal fa-project-diagram'
});
});
clients.push(
{
name: clientValue.name,
url: '/client/' + clientValue.id,
icon: 'fal fa-building',
children: processes
});
});
this.nav.find(obj => obj.name == 'Processes').children = clients;
The most likely cause is that the null is just the initial value. Loading the data is asynchronous so you'll need to wait for loading to finish before trying to create any components that rely on that data.
You have an isLoading flag, which I would guess is your attempt to wait for loading to complete before showing any components (maybe via a suitable v-if). However, it currently only waits for the first request and not the second. So this:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
}
);
this.isLoading = false;
would need to be:
this.$axios.get(configurationService.address + "/api/v1/clientConfiguration").then(
response2 => {
this.$clientConfiguration = response2.data;
this.isLoading = false;
}
);
If it isn't that initial value that's the problem then you need to figure out what is setting it to null. That should be prety easy, just put a debugger statement in your setter:
$clientConfiguration: {
get: function () { return globalData.$data.$clientConfiguration },
set: function (newConfiguration) {
if (!newConfiguration) {
debugger;
}
globalData.$data.$clientConfiguration = newConfiguration;
}
}
Beyond the problem with the null, if you're using Vue 2.6+ I would suggest taking a look at Vue.observable, which is a simpler way of creating a reactive object than creating a new Vue instance.
Personally I would probably implement all of this by putting a reactive object on Vue.prototype rather than using a global mixin. That assumes that you even need the object to be reactive, if you don't then this is all somewhat more complicated than it needs to be.
I am trying to update taxParentId with the new id that i retrieve with my API call inside the getTaxParentId function, but I cannot get it to change. I can console.log the value fine inside the method, but it won't update it. It seems to be an issue of scope, but i have set $this = this to take care of this, however, it is not working.
the getPostType method works fine and properly updates the data value.
var newVue = new Vue({
el: '#app',
data() {
return{
posts: [],
taxonomy: '',
postType: '',
taxParentSlug: '',
taxParentId: 0
}
},
created (){
let $this = this;
this.getPostType(location.href);
this.getTaxParent(location.href)
this.getTaxParentId();
this.getPosts();
},
methods: {
getPostType: function(currentURL){
if (currentURL.includes('residential')) {
this.postType = 'residential';
}else if(currentURL.includes('commercial')){
this.postType = 'commercial';
}else if (currentURL.includes('auto')) {
this.postType = 'auto';
}
},
getTaxParent: function(currentURL){
if (currentURL.includes('solar')) {
this.taxParentSlug = 'solar';
}else if(currentURL.includes('decorative')){
this.taxParentSlug = 'decorative';
}else if (currentURL.includes('safety-security')) {
this.taxParentSlug = 'safety-security';
}
},
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
}
)
},
getPosts: function(){
let $this = this;
console.log(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
axios
.get(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
.then(function (response) {
$this.posts = response.data;
console.log($this.posts)
}
)
},
},
});
Because of the async, add watchers to your data, and log there.
watch:{
posts(value){console.log(value))},
taxParentId(value){console.log(value))}
}
Ideally you would get a promise from each call, and then wait for them all. If one call is dependent on another, you need to put the second call in a then() block, or even better, await it (async/await)
Using this, all you need to do is return the promise, and it will be synchronized.
async created (){
let $this = this;
await this.getPostType(location.href);
await this.getTaxParent(location.href)
await this.getTaxParentId();
await this.getPosts();
},
So much cleaner then chaining then blocks. You can wrap the entire block in a SINGLE catch, and trap all exceptions AND all rejections. Of course, if the calls are not dependent, you may want to call them in parallel and not await.
Since you are already using promises, you should be able to build a promise chain to solve your async issue.
Take your current function:
```javascript
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
}
)
},
and make it return a value, even if it is just the response
```javascript
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
return response
}
)
},
Then in your created() function, you can chain the call..
created (){
let $this = this;
this.getPostType(location.href);
this.getTaxParent(location.href)
this.getTaxParentId()
.then(function (response) {
this.getPosts();
})
},
This should force this.getPosts() to wait for getTaxParentId to be complete.
I'm building a little vue.js-application where I do some post requests. I use the watch-method to whach for api changes which then updates the component if the post request is successfull. Since the watcher constantly checks the API I want to add the ._debounce method but for some reason it doesn't work.
here is the code:
<script>
import _ from 'lodash'
export default {
data () {
return {
cds: [],
cdCount: ''
}
},
watch: {
cds() {
this.fetchAll()
}
},
methods: {
fetchAll: _.debounce(() => {
this.$http.get('/api/cds')
.then(response => {
this.cds = response.body
this.cdCount = response.body.length
})
})
},
created() {
this.fetchAll();
}
}
</script>
this gives me the error: Cannot read property 'get' of undefined
Can someone maybe tell me what I'm doing wrong?
EDIT
I removed the watch-method and tried to add
updated(): {
this.fetchAll()
}
with the result that the request runs in a loop :-/ When I remove the updated-lifecycle, the component does (of course) not react to api/array changes... I'm pretty clueless
Mind the this: () => { in methods make the this reference window and not the Vue instance.
Declare using a regular function:
methods: {
fetchAll: _.debounce(function () {
this.$http.get('/api/cds/add').then(response => {
this.cds = response.body
this.cdCount = response.body.length
})
})
},
Other problems
You have a cyclic dependency.
The fetchAll method is mutating the cds property (line this.cds = response.body) and the cds() watch is calling this.fetchAll(). As you can see, this leads to an infinite loop.
Solution: Stop the cycle by removing the fetchAll call from the watcher:
watch: {
cds() {
// this.fetchAll() // remove this
}
},
I'm stuck at a crossroads with a component I am working on.
I have the following component "RecentUpdates"
Within it I am passing props down to a few other components, as you can see from the top of the file.
My problem is when adding a new post, I can not figure out how to get the correct update object array back and i also can not figure out the correct 'Vue way' to update the data prop that is being passed down to the "PostList" component.
<template>
<div>
<PostFilter v-on:selectedCategory="getSelectedPosts" v-on:showAllPosts="showAllPosts" :user="user" :categories="categories"/>
<PostList v-if="recent_posts[0]" :categories="categories" :posts="recent_posts[0]" :user="user"/>
<Pagination v-on:getPreviousPage="getPreviousPage" v-on:getNextPage="getNextPage"/>
</div>
</template>
<script>
import PostList from './PostList';
import PostFilter from './PostFilter';
import Pagination from './Pagination';
import EventBus from '../event-bus';
export default {
name: 'RecentUpdates',
data: () => ({
errors: [],
recent_posts: [],
}),
props: ['categories', 'user'],
components: {
PostList,
PostFilter,
Pagination
},
created() {
if (this.user.meta.selected_categories[0] == 0) {
this.showAllPosts();
}
// do not call here, not working as expected
// is switching selected category to an incorrect one
// this.updateList();
this.getSelectedCategory();
},
watch: {
recent_posts: function(newValue) {
EventBus.$on('addPost', function(newPost) {
console.log(newPost);
this.$forceUpdate();
//this.recent_posts.push(newPost);
//this.$set(this.recent_posts, newPost, newPost);
// this.$nextTick(function () {
// this.recent_posts.push(newPost);
// });
});
console.log(this.recent_posts[0]);
// this.$nextTick(function () {
// console.log(this.recent_posts[0]) // => 'updated'
// });
// if (this.user.meta.selected_categories[0] == 0) {
// EventBus.$on('addPost', this.showAllPosts);
// } else {
// EventBus.$on('addPost', this.getSelectedCategory);
// }
//this.updateList();
}
},
methods: {
// updateList() {
// if (this.user.meta.selected_categories[0] == 0) {
// EventBus.$on('addPost', this.showAllPosts);
// //EventBus.$emit('newPost');
// } else {
// EventBus.$on('addPost', this.getSelectedCategory);
// //EventBus.$emit('newPost');
// }
// },
getSelectedCategory() {
let categoryId = this.user.meta.selected_categories[0];
this.getSelectedPosts(categoryId);
},
showAllPosts() {
axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]',
{headers: {'X-WP-Nonce': portal.nonce}})
.then(response => {
this.recent_posts = [];
//this.recent_posts = response.data;
//console.log(response.data);
this.recent_posts.push(response.data);
console.log(this.recent_posts[0]);
})
.catch(e => {
this.errors.push(e);
});
},
getSelectedPosts(categoryId) {
axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&categories=' + categoryId,
{headers: {'X-WP-Nonce': portal.nonce}})
.then(response => {
this.recent_posts = [];
//console.log(response.data);
this.recent_posts.push(response.data);
console.log(this.recent_posts[0]);
})
.catch(e => {
this.errors.push(e);
});
},
/**
* Pagination methods
*
*/
getPreviousPage(page) {
axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page,
{headers: {'X-WP-Nonce': portal.nonce}})
.then(response => {
this.recent_posts = response.data;
})
.catch(e => {
this.errors.push(e);
});
},
getNextPage(page) {
axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page,
{headers: {'X-WP-Nonce': portal.nonce}})
.then(response => {
this.recent_posts = response.data;
})
.catch(e => {
this.errors.push(e);
});
}
},
}
</script>
<style>
</style>
So there are a number of issues I see reading through your code.
You have a recent_posts data property, which is an array. When you make your ajax call to get the posts you push the response which is also an array into the recent_posts array. Why? Why not just set recent_posts = response.data? Then you won't have to be passing recent_posts[0] around.
You're setting up your EventBus handler inside a watcher. This is really unusual. Typically you would set up a handler inside created or mounted.
this inside the EventBus handler likely refers to the EventBus and not your Vue. Ideally, you would set the handler to be a method on the component, which is already bound to the Vue. Something like EventBus.$on("addPost", this.addPost).
Once you've done all that, adding a new post should be as simple as this.recent_posts.push(newPost).
Here is what I might recommend.
export default {
name: 'RecentUpdates',
data(){
return {
errors: [],
recent_posts: []
}
},
props: ['categories', 'user'],
components: {
PostList,
PostFilter,
Pagination
},
created() {
if (this.user.meta.selected_categories[0] == 0) {
this.showAllPosts();
}
this.getSelectedCategory();
EventBus.$on("addPost", this.addPost)
},
beforeDestroy(){
EventBus.$off("addPost", this.addPost)
},
methods: {
getPosts(url){
axios.get(url, {headers: {'X-WP-Nonce': portal.nonce}})
.then(response => this.recent_posts = response.data)
.catch(e => this.errors.push(e))
},
showAllPosts() {
const url = '/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]';
this.getPosts(url);
},
getSelectedPosts(categoryId) {
const url = '/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&categories=' + categoryId;
this.getPosts(url);
},
addPost(newPost){
this.recent_posts.push(newPost)
},
... //other methods
},
}
Try using kebab-case in your event listeners instead of camelCase:
Example: v-on:selectedCategory="getSelectedPosts" should be v-on:selected-category="getSelectedPosts".
Example: v-on:showAllPosts="showAllPosts" should be v-on:show-all-posts="showAllPosts" or even using the shortcut #show-all-posts="showAllPosts".
UPDATE: If you can provide the code of the other components so we can have a clearer vision of your problem, But you only want to track changes that happens on an object or an array in vue.js you need to deep watch them.
your watcher should be :
watch: {
recent_posts: {
deep: true,
handler: function( oldValue, newValue) {
console.log( "recent_posts has changed" );
// A post has been added, updated or even deleted
}
}
}
I have a code that gets json from RESTful API. but It only shows .container and It says that there's nothing in items array. the mysterious thing is it doesn't show any errors about it. so I was trying to debug it showing result from fetch using console.log, so I added like let result = await fetch('video').then(res => res.json()) under the code but It doesn't show anything on browser console. seems like It doesn't run the async getData function but I have no clue..
<template lang="pug">
.container
.columns(v-for="n in lines")
.column.is-3.vid(v-for='item in items')
.panel
p.is-marginless
a(:href='item.videoId')
img(:src='item.thumbnail')
.panel.vidInfo
.columns.hax-text-centered
.column
.panel-item.reddit-ups
span {{ item.score }}
i.fa.fa-reddit-alien.fa-2x
.panel-item.reddit-date
i.fa.fa-calendar.fa-2x
</template>
<script>
export default {
name: 'main',
data: () => ({
items: [],
lines: 0
}),
async getVideo () {
this.items = await fetch('/video').then(res => res.json())
this.lines = Math.ceil(this.items.length/4)
}
}
</script>
There are few issues in your code, and console should warn you about them.
First define data object as ES6 Object Method Shorthand, try to avoid arrow functions:
data() {
return {
items: [],
lines: 0
}
}
Then I guess get video is method, so It should be placed under the methods object:
methods: {
async getVideo () {
this.items = await fetch('/video').then(res => res.json())
this.lines = Math.ceil(this.items.length/4)
}
}
I don't know where you want trigger this method (on click, when instance is created or mounted), but I will use created hook
<script>
export default {
name: 'main',
data() {
return {
items: [],
lines: 0
}
},
methods: {
// I don't think you need async/await here
// fetch would first return something called blob, later you can resolve it and get your data
// but I suggest you to use something like axios or Vue reource
async getVideo () {
await fetch('/video')
.then(res => res.json())
.then(items => this.items = items)
this.lines = Math.ceil(this.items.length/4)
}
},
created() {
this.getVideo()
}
}
</script>