I'm making a simple to-do list application but I need to use an asynch query to fill the tasks on the webpage with what is in the json (I am given a link where the list of todos are). How do I do this? I've been searching everywhere and am stuck. Right now, it is only showing tasks I add, or a task I have manually inputted under data.
This is what I have in the first part for data
el: '#app',
data: {
items: [{
text: "test1",
completed: false,
}],
text: '',
show: 'all',
},
I would check out the library axios for this task. Check out this example: https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
Related
I have a Vue/Quasar application in which I use i18n but now I'm facing a problem: table footer doesn't get translated. In the table headers, for example, I do something like this to translate column names:
{
align: 'left',
field: (val) => val,
label: this.$t('locale.column'),
name: 'column',
required: true,
sortable: true,
},
where $t is 18n function, locale is my component and the column is actually's column's name. I don't have direct access to the footer of the table (where the pagination an the total number of the elements are) and it doesn't get translated. I also use Quasar language packs, quasar.js goes like this:
import en from 'quasar/lang/en-us.js'
/*
import other languages
*/
import {
state,
} from '#state/modules/i18n';
const locale = state.locale;
const langDictionary = {
// all the imported langs go here
};
Vue.use(Quasar, {
config: {},
components: { /* not needed if importStrategy is not 'manual' */ },
directives: { /* not needed if importStrategy is not 'manual' */ },
plugins: {
Cookies,
Dialog,
Loading,
Notify,
},
lang: langDictionary[locale]
});
export {langDictionary};
You are probably setting the language at startup correctly as lang: langDictionary[locale]. If you change the language state in your app later, you need to also inform Quasar if you want Quasar components and plugins to get correctly translated. See the docs, Change Quasar Language Pack at Runtime for how to achieve that, the docs about language pack also includes tips for dynamically loading the language pack.
You didn't specify how you change the language in your app, so I can't give an example built upon that.
I'm looking for the most optimal way of solving the following problem and would really appreciate some help. I have built a react native app which uses redux-saga for state management and redux-persist to keep offline data.
Problem:
When offline, users need to be able to use the native app to create "Posts" (for the sake of example) which can have multiple images attached to them. Then once they have internet connection they need to be able to click a sync/upload button. This button changes state.offlineQueue.offlineQueueShoud from 'cache' to 'sync'
Few things to consider; server side, I have a posts table, and an images table with a many to one relationship (many images to one post), which means to upload an image to the server I need to pass the post_id; meaning I have to have uploaded the post it's 'attached' to to the server so I can pass the post_id in the request. To solve this part, I have a function that uses temporary uuid's to maintain the relationship between posts and images:
function* postProcessToOfflineQueueSaga (action) {
try {
let post = Object.assign({}, action.payload);
post.uuid = uuid();
post.uploaded = false;
const imagesArr = post.images;
imagesArr.forEach(image => {
image.uuid = uuid();
image.postUuid = post.uuid;
});
post.imageIds = imagesArr.map(image => image.uuid);
delete post.images;
yield put({ type: POST_ADD_TO_OFFLINE_QUEUE, post });
yield put({ type: IMAGE_ADD_TO_OFFLINE_QUEUE, imagesArr });
} catch (error) {
console.log(error)
}
}
Which then saves it to the app state into two arrays; posts and images. E.g.
state.offlineQueue.offlinePosts: [
...
{
id: undefined,
uuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
imageIds: [
"62e11ef4-01f7-4052-a3e4-6cd109392818",
"2c7065ef-fed9-457f-950a-08d4224516dd",
],
uploaded: false,
}
...
]
state.offlineQueue.offlineImages: [
...
{
id: undefined,
uuid: "62e11ef4-01f7-4052-a3e4-6cd109392818",
postId: undefined,
postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
uploaded: false,
uri: "/path/to/file/on/device",
},
{
id: undefined,
uuid: "2c7065ef-fed9-457f-950a-08d4224516dd",
postId: undefined,
postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
uploaded: false,
uri: "/path/to/file/on/device",
},
...
]
state.offlineQueue.offlineQueueShoud: 'cache' // either 'cache' or 'sync'
So how do I go about sending this data to the server? What I'm thinking is:
Check 'offlineQueueShoud' (if 'cache' don't do anything to save battery?)
If offlineQueueShoud === 'sync', first iterate through the posts array and send each post to the server and use the response so that we can set post.id and image.postId to the server generated id.
Once all posts uploaded, start uploading images one by one as we now have the right post id.
Once all posts and images uploaded, clear the list.
I've had a look at redux saga channels, is that the best way to do it? If so, how do I make it so that if offlineQueueShoud === 'cache' it doesn't eat up battery, and if the app is closed/reopened no data is lost. Apologies if I'm being a noob, I'm only young :)
P.S. am I even doing this all the right way?!
Is it possible to have multiple menu attachment and allow users to select each menu before sending back the collated response?
return Promise.resolve({
text: `Rate each game`,
attachments: [
...games.map(game => ({
color: "#5A352D",
title: game,
callback_id: "game:done",
actions: [
{
name: "done",
text: "Select a score",
type: "select",
value: "game:done",
options: [
{ text: 1, value: 1 },
{ text: 2, value: 2 }
]
}
]
}))
]
});
This images shows how it renders
But, I need to call the callback only when the user has finished scoring each game.
Perhaps, I can provide an additional button for that, but how can I handle callback for these menu actions
Choosing a menu option will always fire a request to your app. But you could replace the former message and recreate the menu list each time and show the remaining menus to the user until all are chosen. Technically it will be a new message each time, but by replacing the old message the user will not notice.
I have an enyo kind like this:
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
I am trying to test this kind with the following jasmine describe.
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var branding = enyo.kind({
kind: "branding"
});
expect(branding.$.appName.getContent()).toBe("Stars of the East");
})
});
I am getting an error. Can anyone guide me ?
You need to put your sub-components in a components array (you already have the closing bracket for the array in your code):
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
You need to actually instantiate your kind to test it. enyo.kind() only creates the template. Try:
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var localBranding = new branding();
expect(localBranding.$.appName.getContent()).toBe("Stars of the East");
})
});
You will also have to fix the problem that Art pointed out where you do not have the components block.
You will probably also need to actually render your components if they have UI elements you want to check. You may want to change the localBranding line to:
var localBranding = new branding().renderInto(<some element on your page>);
Finally, we suggest that kind names should be uppercase to distinguish them from instance names. name: "branding" would be name: "Branding" if you follow our advice.
{ name: 'status', type: 'object' },
This is the fields in a model.
Can i define status.status1="value1", status.status2="value2" and so on..
if yes...then how?
If this is not possible, then can i use array in type??
If I understand the question correctly, what you're looking for is a store. Here's an example:
Ext.define('AppName.store.Statuses', {
extend: 'Ext.data.Store',
config: {
model: 'AppName.model.ModelName',
data: [
{ name: 'name1', status: 'status1' },
{ name: 'name2', status: 'status2' },
{ name: 'name3', status: 'status3' },
]
}
});
The above code would go in a store directory within your app folder, in a file called StoreName.js. Here, the data is hard coded in, but a store is generally used to load data through an AJAX call. See the docs for more information about that. The store is generally named as the plural of the model name. For example, if your model was defined as Status, then the store would be named Statuses.
I hope that helps!
Just set the field type to 'auto', see this Sencha forum post