Vuejs passing arguments with a routes href link - javascript

I'm quite new to Vuejs, so Sorry in advance!
I have a component called "Goods" which shows all the items in a route path ("/Goods") and another component called "AddGoods" at ("/AddGoods") which is a form and submits data to my database table.
I have to use two separate pages for these two and they work closely together.
now I also want to be able to use my AddGoods form for editing and showing details on my already added Goods and I'm having trouble finding a way to send some parameter with the link so that I could manage my field and buttons based on each situation (like making fields readonly for showing details and so on).
here's my route.js :
{
path: "/addGoods",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and here's the link to "AddGoods" :
<v-btn v-on="click" href="/AddGoods"> Add a new item </v-btn>

So I ended up doing it like this :
route.js:
{
path: "/addGoods/:id",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and to call it , I personally found the Programmatic Navigation easier to use, so :
this.$router.push({name: "add goods", params: { id: 123 }});

Related

kendo angular menu without typescript

How I can use the kendo menu without typescript?
html
<kendo-menu [items]="menuItems" [vertical]="true" style="display:inline-block;" (select)="onMenuSelected($event)"></kendo-menu>
TS
menuItems: any[] = [
// {
// text: "Rename",
// },
{
text: "Delete",
},
{
text: "Copy",
},
];
I want to use only html to use of menu
Technically, you can enter the data in the template itself, like this:
<kendo-menu [items]="
[{
text: 'Rename'
},
{
text: 'Delete'
},
{
text: 'Copy'
}]">
</kendo-menu>
Now, while it is possible, it's not good practice. Even if the menu, in this case, is static and simple, it's better to have a const on the component containing the menu entries, or perhaps in a dedicated file if you have many such constants which you in several places.

How to display different front-end router view at the same time using Vue

I have a page, there are three iframes in this page(I have to use iframe) and they will be displayed at the same time. In these iframes, I set specified the url comes from a SPA page. such as:
routes: [
{
path: '/',
name: 'air',
component: () => import('#/views/dashboard/index.vue'),
children: [
{
path: '/top',
name: 'airTop',
component: () => import('#/views/dashboard/top.vue')
},
{
path: '/left',
name: 'airLeft',
component: () => import('#/views/dashboard/left.vue')
},
{
path: '/right',
name: 'airRight',
component: () => import('#/views/dashboard/right.vue')
}
]
}
]
When I change some values in top iframe, I find the left one and the right one will not be changed. I realize that the different iframe will get a new Vue instance, so the value won't be shared.
My question: Is there any way can share the value in different iframe at the same time. Using sington?

Displaying JSON data received through API call and axios into a Bootstrap-Vue Table

I am trying to display data I have received through an API call using Axios into a tidy Bootstrap-Vue table.
Using Axios, the title for each clinical tab index is updated. Currently, I am displaying the clinical tab title for each index using a v-for loop, and thus am displaying the data for each tab in on single row. I would like to split each tab into its own table, but am not sure on how to approach this.
Any help would be greatly appreciated!
data: () => ({
// reactive data property of the component.
//test: 'delete later',
loading: true,
clinicaltabs: [
{
id: 1,
title: "Observations Go Here",
htmlcontent: "Observations (Tab 1)"
},
{
id: 2,
title: "Medications Go Here",
htmlcontent: "Medications (Tab 2)"
},
{
id: 3,
title: "ADLs Go Here",
htmlcontent: "ADLs (Tab 3)"
}
]
}),

Bind data to component with Vuex

I'm new to vue.js and I'm trying to use vuex. Here is my issue:
I have a list of articles (which is a component) linked with a store with v-for="article in articles and a computed property:
computed: {
articles() {
return this.$store.state.articles
}
}
So here is the data in my store:
state: {
articles: [{
title: "Article 1",
id: 1,
description: "Article 1",
}, {
title: "Article 2",
id: 2,
description: "Article 2",
}
}]
}
When I click on an article, I want it to redirect to the article page template (which is a component) with <router-link :to="{path: '/article/'+article.id}"></router-link>.
What I'm trying to do is bind the data of the correct article in the articlePage template.
The issue is that if I apply the same computed property to my articlePage.vue component with a v-for, I will display all of the article on the same page. I would like to display only the matching id component.
How can I do that?
Thank you for your time :)
From your comments I understand that you use vue-router module
So in your routes.js (or structure ) your must have something like this
const router = new VueRouter({
routes: [
{ path: '/articles', component: articlesPage },
{ path: '/article/:id', component: articlePage }
]
})
Then in your articlePage component you can extract ":id" like this:
this.$route.params.id
because vue-router gives you access to the object $route with methods and properties
Check more here https://router.vuejs.org/guide/essentials/dynamic-matching.html
then you can use it to search the articles array and find the data and present them
e.x.
computed:{
selectedArticle(){
var article_id = this.$route.params.id;
var articles = this.$store.state.articles;
var article = null;
for(var a=0;a<articles.length;a++){
if(articles[a].id == article_id ){
article = articles[a];
break;
}
}
return article;
}
}

JSON: How to handle attributes derived from the key?

I have a JSON object like this in my application:
var pages = {
home: {
title: "Home",
description: "The home page",
file: "home.html",
url: "/home"
},
blog: {
title: "Blog",
description: "Our blog",
file: "blog.html",
url: "/blog"
}
};
The properties file and url can always be derived from the respective key, so I currently define the above object like this in my code:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.file = key + ".html";
value.url = "/" + key;
}
However, since file and url are derived attributes, adding them to the object seems redundant. But since I pass the value around for each page, not the key, I would have to add it to the object as well, which would also be redundant. Like this:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.jsonKey = key;
}
Now I have three different approaches and don't really like any of those. I think this should be a fairly common problem, so how would you approach this? And what if the derived attribute is to be used more than once?
you should consider storing pages as a list of objects rather than as an object with properties. This seems more consistent logically and solves your redundancy concerns.
var pages = [
{
key: 'home'
title: "Home",
description: "The home page",
},
{
key: 'blog',
title: "Blog",
description: "Our blog",
}
];
additionally. you can create classes for page objects and use methods that compute the derived properties (optionally caching them, in case you think repeated access is costly. However, doing that for simple string concatenation seems like an overkill)
Why do you want to store the same data in a different form, when you already have it in one form(your key).
In my opinion, don't go for any of these, because whenever you wish to get the file and url for a particular page, you can easily get it from the page.key.

Categories