I'm working on a blog and I'm having a hard time trying to plug Vuex and Vue-meta. Here is the code :
On the article template, I use a v-for="article in selectedArticle" and a computed property to display the correct article from Vuex
selectedArticle() {
return this.$store.state.articles.filter(article => article.id == this.$route.params.id);
},
I'm trying to use Vue-meta in this way :
metaInfo: {
title: ???,
meta: [
{ charset: 'utf-8' },
{ vmid: 'description', name: 'description', content: ???.id },
{
'property': 'og:image',
'content': https://api.someurl.com/article/ + ???.id,
'vmid': 'og:image'
}
]
}
I think one way to do it would be to bind the vuex data retrieved in SelectedArticle to the actual data property of the component, and then use title : this.article.title in metaInfo.
But I don't know how to do it and I'm not sure if this is the right way.
Any other suggestions?
Thank you very much
Related
I'm trying to learn fastify throught the official documentation. I'm really intrested in the validation of an incoming post request with a json schema. Following the instructions i added to my routes:
fastify.addSchema({
$id: 'http://example.com/',
type: 'object',
properties: {
hello: { type: 'string' }
}
})
fastify.post('/', {
handler() { },
schema: {
body: {
type: 'array',
items: { $ref: 'http://example.com#/properties/hello' }
}
}
})
Now the problem is that I can not write a json that can be accepted by this schema. From my basic understanding a simple post request like the following should be accepted
[
{
"hello": "bye"
},
{
"hello": "bye bye"
}
]
However server keeps telling me that body[0] should be string. Where am I wrong?
The reference $ref: 'http://example.com#/properties/hello' points to the hello property schema value, which is { type: 'string' }.
This means the schema in fastify.post('/', { expects the body to be an array of strings.
I am using rally lookback API and creating a defect trend chart. I need to filter defects that do not have a tag "xyz".
Using the following:
this.myTrendChart = Ext.create('Rally.ui.chart.Chart', {
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: {
find: {
_TypeHierarchy: "Defect",
State: { $lt: "Closed"},
Tags.Name: { $nin: ["xyz"] },
_ProjectHierarchy: projectOid,
_ValidFrom: {$gte: startDateUTC}
}
},
calculatorType: 'Calci',
calculatorConfig: {},
chartConfig: {
chart: {
zoomType: 'x',
type: 'line'
},
title: {
text: 'Defect trend'
},
xAxis: {
type: 'datetime',
minTickInterval: 7
},
yAxis: {
title: {
text: 'Number of Defects'
}
}
}
});
This does not return any data. Need help with the filter for tags.
Tags is a collection of tag-oids so you'll need to find and use the oid of the tag vs the name, at which point it'll just be Tags: { $nin: [oid] }. Caveat: technically, due to how expensive it is, $nin is unsupported (https://rally1.rallydev.com/analytics/doc/#/manual/48e0589f681160fc316a8a4802dc389f)...but it doesn't throw an error so maybe it works anyway.
I am trying to create an SPA using dynamic server response.
For e.g. data returned is:
components: [
{
name: "Parent1",
data: {...},
children: [
{
component: {
name: "Child1",
data: {...},
children: []
}
},
{
component: {
name: "Child2",
data: {...},
children: []
}
}
]
},
{
name: "Parent2",
data: {...},
children: [
{
component: {
name: "Child1",
data: {...},
children: []
}
}
]
}
]
What I would like to do is define parent components and children separately.
i.e. Components list:
- Parent : Common parent with data1 and data2 displayed, instantiates Children as needed
- Child1
- Child2
Anyone have any ideas for the best approach?
You may do like this:
Parent API URL: www.example.com/api/parent/parent_id (generally known as API endpoint)
Server Response:
{
data: {
type: "Parent",
id: "parent123",
name: "Parent 1",
children_ids: ["c1", "c2", "c3"]
},
included: [
{type: "Child", id: "c1", name: "Child 1", ...},
{type: "Child", id: "c2", name: "Child 2", ...},
{type: "Child", id: "c3", name: "Child 3", ...},
]
}
Note:
Every data item needs to have an ID. Your example does not mention ID anywhere.
This example roughly follows the guidelines in http://jsonapi.org/ but you are free to follow whatever works for you, as long as you document it for the team.
This example attempts to load the actual data in response.data object, and side-loads children data in response.included array, thus keeping parent and child separate. You need to handle this response convention in Vue.js, preferably using Vuex as the store.
If you intend to follow this example, you also need to make sure the child API endpoints are active and can be independently accessed. This is helpful if your Vue App is loaded directly with child URL.
Sample child API endpoint:
www.example.com/api/parent/parent_id/child/child_id (if child_id is NOT unique)
www.example.com/api/child/child_id (if child_id is unique)
Did you mean component with is?
<component :is="componentType"></component>
This is the dynamic components feature of Vue.js
A very simple example: http://codepen.io/CodinCat/pen/ZLjrRX?editors=1010
see the document here: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
I have a Blog model with hasMany Posts (and many other fields). Now I want to list these posts in a List-view like that:
[My post #1]
[My post #2]
[My post #3]
As far as the API described, I'm able to pass either a store or a data attribute to Ext.dataview.List. But I was not able to find out how to pass the hasMany records to the list so it will display an item for each of them.
Do I really have to create another store? Isn't it possible to configure my dataview to something like store: 'Blog.posts' or data: 'Blog.posts' or even records: 'Blog.posts'?
Extend the dataview.List to define the itemtpl to loop through the posts
itemTpl: new Ext.XTemplate(
'<tpl for="**posts**" >',
'<div>{TheBlogPost}</div>',
'</tpl>'
)
As #Adam Marshall said, this doesn't work as easy as I imagined.
Sencha autogenerates stores from associations if you know how to access them.
So you simply can switch out the list's store for the autogenerated "substore" when it has loaded.
This approach probably has some problems, e.g. when listpaging plugin is used, but it is quick.
Example:
MODELS
Ext.define('Conversation', {
extend: 'Ext.data.Model',
config: {
fields: [
],
associations:
[
{
type: 'hasMany',
model: "Message",
name: "messages",
associationKey: 'messages'
}
]
}
});
Ext.define('Message' ,
{
extend: "Ext.data.Model",
config: {
idProperty: 'id_message',
fields: [
{ name: 'text', type: 'string' },
{ name: 'date', type: 'string' },
{ name: 'id_message', type: 'int' },
{ name: 'me', type: 'int'} // actually boolean
]
}
}
);
JSON
[
{
"messages": [
{"id_message": 11761, "date": 1378033041, "me": 1, "text": "iiii"},
{"id_message": 11762, "date": 1378044866, "me": 1, "text": "hallo"}
]}
]
CONTROLLER
this.getList().getStore().load(
{
callback: function(records, operation, success) {
//IMPORTANT LINE HERE:
getList().setStore(Ext.getStore(me.getList().baseStore).getAt(0).messages());
},
scope: this
}
);
LIST-VIEW
{
flex: 1,
xtype: 'list',
itemId: 'ConversationList',
data: [],
store: 'ConversationStore',
baseStore: 'ConversationStore',
itemTpl:
' {[app.util.Helpers.DateFromTimestamp(values.date)]}<br><b>{name}</b>' +
' {[app.util.Helpers.fixResidualHtml(values.text)]} </div>' +
},
I am trying to load a Nested list onto my Sencha app. The problem is I am not familiar with it and i am not sure if the json file i am using is correct.
[
{
"text":[
{
"text":"1.1.1",
"leaf":true
}],
"text":[
{
"text":"1.1.1",
"leaf":true
}
]
}
]
This is my store code
//Defining the store for the Nested List
Ext.define('InfoImage.store.nestedListStore', {
extend: 'Ext.data.TreeStore',
requires: 'InfoImage.model.nestedListModel',
id:'nestedListStore',
config:{
//Calling the required model for the Work Item List
model : 'InfoImage.model.nestedListModel',
//Defining the proxy for the Work Item List to pull the data for the List
proxy : {
type : 'ajax',
url : 'app/model/data/list.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: true
}
});
and my main code is
Ext.define("InfoImage.view.nestedList", {
extend:'Ext.NestedList',
xtype:'nestedList',
id:'nestedList',
config:{
fullscreen:'true',
title:'Nested List',
xtype:'nestedList',
//displayField : 'text',
html:'Nested List on its way!!!',
store:'nestedListStore'
//itemTpl:'{text}'
}
});
The output thats displayed is [object object]. I dont know what is missing. ANy help is appreciated.
Firstly, your Json is a VALID json. Always check for valid json by pasting the json on jsonlint.com
Secondly, I see that you have commented out the
displayField:'text'
property. If you don't provide the displayField to the nestedlist, it won't come to know, which items from the data store to show in the list.
Probably, that's why you are getting the [object Object] as your o/p in the list.
Uncomment the above line and check.
It seems that your JSON cannot work with Ext.NestedList because text is a field of your Model and it should not be declared as rootProperty in your JSON file.
Firstly, assume that you have this model definition:
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
According to your data, your JSON file should look like this:
items: [
{
text: '1.1',
items: [
{ text: '1.1.1', leaf: true },
{ text: '1.1.2', leaf: true }
]
}
]
You have to add this config to your Store as well defaultRootProperty: 'items'