I'm looking for advice on how to go about this routing scenario:
I have the following HTML that loops category and items in the category. The <router-view> is inside the category so that when an item is clicked it will open only in the category that related to that item.
<ul>
<li v-for="cat in categories">
<ul>
<li v-for="business in filteredByCat">{{business.name}}</li>
</ul>
<router-view v-if="..."></router-view>
</li>
</ul>
My routes are as follows:
{
path: '/businesses',
name: 'Directory',
component: Directory,
children: [{
path: ':listing',
name: 'Listing',
component: Listing
}]
}
Visualization:
How do I get the data of the item clicked to pass to the router-view? I assume I'd use props but that wouldn't work if the user visited details directly by URL?
I tried getting the item like so:
methods: {
finalItem ($route) {
var match = this.businesses.filter((business) => {
return business.link === $route.params.listing
})
return match[0]
}
}
This doesn't work, even if it did, this feels wrong. Is there a way to pass the data in a way that would preserve even when visited directly? This is my primary concern. (I understand the repeated <router-view> is bad code but am not sure how to get around doing that with my layout. Open to suggestions on that too though.)
The way you're using router-view, you might as well just drop a component in. As far as using multiple router-views goes, it's very common, so idk what #varbrad is talking about there. Child routes are fine.
The not-so-common part is using multiple router-view's in one component. The UI you're aiming for is nearly identical to Netflix. If you check out what they're doing, you'll see that they pass a movie ID (business id/shortname) as "jbv" and a row number (category name) as "jbr" in the route query.
Let's mimic this in your component:
I'm not sure what filteredByCat looks like, but the way you have it set up, it would list the same businesses for every category. Try something like this:
computed:{
businessesByCategory(){
let dictionary = {};
this.businesses.forEach(business=>{
business.categories.forEach(category=>{ // assuming each business has an array of categories
dictionary[category] = dictionary[category] || [];
dictionary[category].push(business)
})
})
return dictionary;
}
},
data(){
return {
activeBusiness:null
}
},
methods:{
setActiveBusiness(business){
this.activeBusiness = business;
},
setUrlQuery(listing, category){
this.$route.query.listing = listing;
this.$route.query.category = category;
},
openListing(business, category){
this.setActiveBusiness(business);
this.setUrlQuery(business.link, category);
}
}
-
<ul>
<li v-for="cat in categories">
<ul>
<li
v-for="business in businessesByCategory[cat]"
#click="openListing(business, cat)"
>
{{business.name}}
</li>
</ul>
<Listing :business="activeBusiness" v-if="$route.query.category == cat"></Listing>
</li>
</ul>
Related
I have an array of articles that can be filtered based on their category. If you click the filter for "ideas" it will filter the array into a new array, let's say "ideasFiltered" and then i commit it to my store "filteredArticles". If i leave the page and press back it is saving that info. Yay! Great! BUT, let's say i go to a new page in my website and then i click my news page again, it has still saved that last commit "ideasFiltered". Is there a way to only save that data if you are pressing "back" in the browser or pressing "back to articles" out of one of my articles (i have a button that let's you go back to the list of articles on each article page), but if you click to a different link in my site it will reset to my full article list?
here is my store:
const store = new Vuex.Store({
state: {
filteredArticles: this.articles
},
mutations: {
setFilteredList (state, value) {
state.filteredArticles = value
}
},
plugins: [
createPersistedState()
],
})
my computed:
computed: {
filteredArticles () {
return store.state.filteredArticles
}
}
so if you click one of my filtered is runs a script, here is an example of the ideas script
ideas: function ideas() {
this.$store.commit('setFilteredList', articles) **// resetting to the full list before filtering**
var ideasFiltered = this.filteredArticles.filter(function(post) {
return post.category === 'Ideas';
});
this.filteredCategory = 'ideas'; **// this is used to add the category to my url**
this.$store.commit('setFilteredList', ideasFiltered) **// committing to the store**
}
here is my html, not sure if it is really necessary though
<div class="news-article-list">
<ul>
<li v-for="(article, index) in filteredArticles" :key="index">
<a :href="article.url">
<img :src="article.featureImg" v-if="article.featureImg" alt="Article Feature Image" />
<h2 class="news-title">{{ article.title }}</h2>
<p class="news-date">{{ article.date }}</p>
<p class="short-desc">{{ article.shortDesc }}...</p>
</a>
<router-link class="read-more" :to="article.url">Read More</router-link>
</li>
</ul>
</div>
Let me know if i need to explain any further. I need it to commit ALL articles if going to a different page on my site and clicking news to get back to the news page, but saving the FILTERED article list if you go to an article and click back.
thanks in advance!
I wouldn't worry about detecting the back button. What you want to know where from did the user come and where to the user wants to go. to and from are your routes. ideasFiltered is changed permanently until you clear it manually. To handle clearing it yourself, create an action in vue-router that resets the data in ideasFiltered and then dispatch that action depending on what route the user is on. You can add a watch in your Vue component to watch the global vue-router $router. In Vue.js 3 its like this:
import {useRoute} from 'vue-router';
import {useStore} from 'vuex';
....
setup() {
const $route = useRoute();
const $store = useStore();
watch(() => $route.name, async () => {
// If the user is not on News or Articles route, then tell store to reset filtered list
if ($route.name !=== "News" || $route.name !=== "Articles") {
$store.dispatch('clearFilteredList', null) // You need to create this action in your store
},
{
deep: true,
immediate: true
}
)
}
The mutation and action in $store to be committed would be something like:
mutations: {
setFilteredList (state, value) { // value passed should be null
state.filteredArticles = value
}
actions: {
clearFilteredList({commit}, payload) { // This is null from Vue component remember!
commit('setFilteredList', payload) // sets it to null
}
I can't see your full store code so the above answer is a best guess but should give you an idea how to go about it. You don't have to use null, you could use make it an empty array or object e.g. []
Background:
I'm a Python/Vue developer; I've been using Vue since 2016.
I have a client who runs a weight loss / meal planning business: clients pay her to prepare weekly single-page PDF menus that tell them (the clients) exactly what to eat for breakfast, lunch, and dinner of every day of the week. (image of an example menu)
Each meal is shown as a list of ingredients.
Right now she's preparing these menus in Excel, and she hired me to reproduce and extend the functionality of what she has in Excel, but in a Python/Vue app.
The app I'm building for her has many "pages" ("top-level" components) to allow her to add/modify/delete objects like clients, ingredients, and recipes (image), but the most complicated part of the UI is the component in which she can define the meals for every meal of every day of the week (image). That component is named WeeklyMenu.vue.
WeeklyMenu.vue itself contains seven DailyMenu.vue children, one for each day of the week (Monday, Tuesday, etc.). (image)
Each DailyMenu.vue component itself contains four Meal.vue components, one for each of four meal types: Breakfast, Lunch, Dinner, and Snacks. (image)
Important: At the moment, the DailyMenu.vue and Meal.vue components themselves contain their data rather than accessing it from the Vuex store.
For example, the list of ingredients for each meal is contained within the Meal.vue component as a mealIngredients variable within the component's data attribute. (image)
Side-note: This means that there are lots of HTTP requests being sent to the back-end when the page loads as all of the meals are requesting their own data, rather than a single request being sent via a Vuex action (for example). This seems like it can't be best practice.
The problem:
The problem is that she is now asking me to add features in which a change to the data in one subcomponent should update the data in a different subcomponent.
For example, she wants the app to work so that when she has the same recipe in several different Meals of the week, then a change to an ingredient in one of the meals will propagate to the other meals that have the same recipe. (image explanation)
My question:
What is the best practice for handling a situation like this? Should I move the ingredient data into the Vuex store or (in the same vein) the lowest-common-ancestor WeeklyMenu.vue component? If so, how exactly should it work? Should there be a separate variable for each meal? Or should I have an object that contains data for all of the different meals? If I use a single object, do I need to worry that a watcher on that object in the Meal.vue component would be triggering even when a change was made to a different meal's data?
If I store all the meal ingredients in separate variables, I would need to pass all of those to every meal (so every meal would need to receive every other meal's ingredients as separate props). So that doesn't seem like the right way to go.
If a user is making a particular change to a particular meal, how would I only have the other meals with the same name react?
Related links:
Communication between sibling components in VueJs 2.0
I'm looking into whether it would make sense to move the ingredient data up to the level of the WeeklyMenu.vue component as described in the "Lowest Common Ancestor" approach (here and here).
Simplified example of the situation I'm trying to handle:
Without Vuex: https://codepen.io/NathanWailes/pen/zYBGjME
Using Vuex: https://codepen.io/NathanWailes/pen/WNxWxWe
With everything working (including the state being kept in Vuex) except the propagation: https://codepen.io/NathanWailes/pen/KKMYNVZ
Yes, problem domain seems complex enough to more than justify use of Vuex. I would not go with keeping data in components and sharing by props - that doesn't scale well
Keep each Recipe as an object in single object recipes - you don't need to worry about watchers. If one particular Recipe object will change, Vue will re-render only components using same Recipe object (and if done properly you don't even need watchers for that)
Create a "weekly menu" object inside the store
In leaf nodes (Meals) of that object just use some kind of reference (by name or unique ID if you have one) into recipes. As a result multiple Meal.vue components on a menu will use same object in the store and update automatically
I ended up getting it working in a simple example in CodePen, which I'm going to use as a guide when trying to get it working on the actual site.
The summary of my findings with this solution is, "Vue will actually update when the nested entries of a Vuex state object are updated; you don't need to worry about it not detecting those changes. So it's OK to just keep all the data in a single big Vuex store object when you have many duplicate sibling components that need to react to each other."
Here's the CodePen: https://codepen.io/NathanWailes/pen/NWRNgNz
Screenshot
Summary of what the CodePen example does
The data used to populate the menu all lives in the Vuex store in a single weeklyMenu object, which has child objects to break up the data into the different days / meals.
The individual meals have computed properties with get and set functions so that it can both get changes from the store and also update the store.
The DailyMenu and WeeklyMenu components get their aggregate data by simply having computed properties that iterate over the Vuex weeklyMenu object, and it "just works".
I have same-named meals update to match each other by iterating over the meals in the Vuex mutation and looking for meals with the same "Ingredient Name".
The code
HTML
<html>
<body>
<div id='weekly-menu'></div>
<h3>Requirements:</h3>
<ul>
<li>Each row should have all the numbers in it summed and displayed ('total daily calories').</li>
<li>The week as a whole should have all the numbers summed and displayed ('total weekly calories').</li>
<li>If two or more input boxes have the same text, a change in one numerical input should propagate to the other same-named numerical inputs.</li>
<li>Ideally the data (ingredient names and calories) should be stored in one place (the top-level component or a Vuex store) to make it more straightforward to populate it from the database with a single HTTP call (which is not simulated in this example).</li>
</ul>
</body>
</html>
JavaScript
const store = new Vuex.Store(
{
state: {
weeklyMenu: {
Sunday: {
Breakfast: {
name: 'aaa',
calories: 1
},
Lunch: {
name: 'bbb',
calories: 2
},
},
Monday: {
Breakfast: {
name: 'ccc',
calories: 3
},
Lunch: {
name: 'ddd',
calories: 4
},
}
}
},
mutations: {
updateIngredientCalories (state, {dayOfTheWeekName, mealName, newCalorieValue}) {
state.weeklyMenu[dayOfTheWeekName][mealName]['calories'] = newCalorieValue
const ingredientNameBeingUpdated = state.weeklyMenu[dayOfTheWeekName][mealName]['name']
for (const dayOfTheWeekName of Object.keys(state.weeklyMenu)) {
for (const mealName of Object.keys(state.weeklyMenu[dayOfTheWeekName])) {
const mealToCheck = state.weeklyMenu[dayOfTheWeekName][mealName]
const ingredientNameToCheck = mealToCheck['name']
if (ingredientNameToCheck === ingredientNameBeingUpdated) {
mealToCheck['calories'] = newCalorieValue
}
}
}
},
updateIngredientName (state, {dayOfTheWeekName, mealName, newValue}) {
state.weeklyMenu[dayOfTheWeekName][mealName]['name'] = newValue
}
}
}
)
var Meal = {
template: `
<td>
<h4>{{ mealName }}</h4>
Ingredient Name: <input v-model="ingredientName" /><br/>
Calories: <input v-model.number="ingredientCalories" />
</td>
`,
props: [
'dayOfTheWeekName',
'mealName'
],
computed: {
ingredientCalories: {
get () {
return this.$store.state.weeklyMenu[this.dayOfTheWeekName][this.mealName]['calories']
},
set (value) {
if (value === '' || value === undefined || value === null) {
value = 0
}
this.$store.commit('updateIngredientCalories', {
dayOfTheWeekName: this.dayOfTheWeekName,
mealName: this.mealName,
newCalorieValue: value
})
}
},
ingredientName: {
get () {
return this.$store.state.weeklyMenu[this.dayOfTheWeekName][this.mealName]['name']
},
set (value) {
this.$store.commit('updateIngredientName', {
dayOfTheWeekName: this.dayOfTheWeekName,
mealName: this.mealName,
newValue: value
})
}
}
}
};
var DailyMenu = {
template: `
<tr>
<td>
<h4>{{ dayOfTheWeekName }}</h4>
Total Daily Calories: {{ totalDailyCalories }}
</td>
<meal :day-of-the-week-name="dayOfTheWeekName" meal-name="Breakfast" />
<meal :day-of-the-week-name="dayOfTheWeekName" meal-name="Lunch" />
</tr>
`,
props: [
'dayOfTheWeekName'
],
data: function () {
return {
}
},
components: {
meal: Meal
},
computed: {
totalDailyCalories () {
let totalDailyCalories = 0
for (const mealName of Object.keys(this.$store.state.weeklyMenu[this.dayOfTheWeekName])) {
totalDailyCalories += this.$store.state.weeklyMenu[this.dayOfTheWeekName][mealName]['calories']
}
return totalDailyCalories
}
}
};
var app = new Vue({
el: '#weekly-menu',
template: `<div id="weekly-menu" class="container">
<div class="jumbotron">
<h2>Weekly Menu</h2>
Total Weekly Calories: {{ totalWeeklyCalories }}
<table class="table">
<tbody>
<daily_menu day-of-the-week-name="Sunday" />
<daily_menu day-of-the-week-name="Monday" />
</tbody>
</table>
</div>
</div>
`,
data: function () {
return {
}
},
computed: {
totalWeeklyCalories () {
let totalWeeklyCalories = 0
for (const dayOfTheWeekName of Object.keys(this.$store.state.weeklyMenu)) {
let totalDailyCalories = 0
for (const mealName of Object.keys(this.$store.state.weeklyMenu[dayOfTheWeekName])) {
totalDailyCalories += this.$store.state.weeklyMenu[dayOfTheWeekName][mealName]['calories']
}
totalWeeklyCalories += totalDailyCalories
}
return totalWeeklyCalories
}
},
components: {
daily_menu: DailyMenu
},
store: store
});
How can I achieve to show detailed page from a search function??
for example I have the data from the API call to be rendered in a list, but then I would like to hit the "more" link and show a detailed page of the selected list
example link: https://master.d1y6j5rvhgf8yj.amplifyapp.com/
with the initial data it works, but after I search it still direct to initial data
const findArticlesQuery = (query) => {
axios.get(url)
.then(res => {
[res.data].map((val) =>(
setArticleData(val.articles)
))
}).catch(error => {
console.log(error.response)
});
}
useEffect(
() =>{
findArticlesQuery();
} ,[]
)
and then I have the article List but not sure how to create a detailed page,
<ArticleListItem articlesData={articleData}/>
const articleDataItem = articlesData.map((value, idx)=> (
<li key={idx} className="collection-item">
<span>{value.title}</span>
<a href={`/article/${idx}`}>More</a> <--- I want to use this button to show detailed info
</li>
))
I can achieve this with router and matching params but only with the initial data,
If I use the search function and the articlesData is updated, the link would still get the initial data and not the searched
I also must say that I have the useEffect on the App component which reset the data when I go to another page
In detail page, you shouldn't use index of list for show detail.
You should use a unique attribute of the data to display details.
example: data: [{code: 'abc', title: '...'}, {code: '', title: ''}...]
const articleDataItem = articlesData.map((value, idx)=> (
<li key={value.code} className="collection-item">
<span>{value.title}</span>
<a href={`/article/${value.code}`}>More</a> <--- I want to use this button to show detailed info
</li>
))
In detail page, Search by received code value
This problem has made me sleep well in two days.
This is my code with vuejs & axios & nuxt:
<template>
<ul>
<li v-for="item in data.apilist.interfaces" :key="item" v-if="data.apilist.interfaces">
{{ item.name }}
</li>
</ul>
</template>
<script>
import axios from 'axios'
const util = require('util')
export default {
data: () => ({
title: ''
}),
async asyncData ({ params, error }) {
let res = await axios.get(
`https://bird.ioliu.cn/v1?url=https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v1/`
)
return { data: util.inspect(res, { showHidden: true, depth: null }) }
},
head () {
return {
title: this.title
}
}
}
</script>
Json data : https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v1/
No matter how I do it, I can't get the value of apilist->interfaces->name.
The above example code system prompts me Cannot read property'interfaces' of undefined , which part is the problem?
===================update
I have installed chrome vue dev, but it seems to work on nuxt applications. Now I try to print the entire data data.
The data generated when I typed the corresponding connection directly in the browser is as follows:
enter image description here
But strange things happen, and when I jump to this link from somewhere else in the application, the data data is like this:
enter image description here
I tried v-for="item in data.apilist" {{item.interfaces.name}} or v-if="data.apilist" or v-if="data" and he no longer complains but no data is generated.
This is the result of the powershell output:
enter image description here && enter image description here
Cannot read property'interfaces' of undefined
Simply means that you are trying to access to the property "interfaces" on a undefined reference : somethingThatDoesntExist.interfaces
Here is the mess :
<li v-for="item in data.apilist.interfaces" :key="item" v-if="data.apilist.interfaces">
{{ data.interfaces }}
</li>
You are iterating on data.apilist.interfaces and binding just beneath :
data.interfaces
But you need to bind
item.interfaces
Since you are using v-for="item in ..." and not v-for="data in ...".
Code review is important before asking.
I wrote a little angular app. I've got an array of menu items which I print in my template:
<nav id="menu">
<ul>
<li ng-repeat="i in menuItems"
ui-sref="{{ i | removeSpacesThenLowercase }}"
ui-sref-active="active">{{ i }}</li>
</ul>
</nav>
And in my app.js I declared my states using ui-router like:
.state('camera', {
url: '/selection',
templateUrl: '/views/selection.html',
uiShade: 'light back',
back: 'intro'
})
Internal URLs work just fine, but what if I want to do this?
.state('facebook', {
url: 'https://www.facebook.com/'
})
This obviously doesn't work. What would be the best approach to have some external (absolute) links in my template without having two separate arrays?
Ui-sref refers to a state. Your views are states. Externals sites aren't states, it's just some outside links.
I suggest you to refactor your menu generator to handle different type of menu entries :
state based link (link generated through ui-sref)
standard link (link generated through href, for external links, emails, etc)
Then you just have to populate menuItems with an array of different objects
I fixed this in my application using ng-if.
Example menu items:
$scope.navItems = [{
id: 1,
title: 'Internal Link',
href: null,
sref: 'internal-state'
},
{
id: 2,
title: 'External Link',
href: 'https:/google.co.uk',
sref: null
}];
Then in the HTML I set the ng-repeat on the <li> but include an <a> for href and one for sref, each with an ng-if.
<li ng-repeat="item in navItems">
<a ng-if="item.sref" ui-sref="{{item.sref}}">{{ item.title }}</a>
<a ng-if="item.href" href="{{item.href}}">{{ item.title }}</a>
</li>
I fixed this by creating a second array for the external links and an ng-click function.
$scope.elink = function(element) {
if (confirm("You're leaving the app, are you sure?")) {
window.location = element;
}
};