Develop Reference

Vue Autocomplete initialDisplay is not displayed

I am using VueJS with Firebase. I am trying to update data using a form. In the form, I am able to get old data in almost all fields. There is an autocomplete field, in which I am not to display the fetched data. The data is present in initialDisplay but not display. It seems like the object is not fetched.
Here is my code
<CustomerAutoComplete
description="Select customer associated with this project"
label="Customer"
placeholder="Customers"
#selected="clientSelected"
:initialValue="projectForm.customerId"
:initialDisplay="customer"
v-model="projectForm.customerId"
/>
props: {
customer: {
type: Object
}
},
data: function () {
return {
projectForm: {
customerId: '',
address: ''
} as Project
}
},
methods: {
clientSelected ({ selectedObject }) {
this.projectForm.customerId = selectedObject.id
if (selectedObject.address) this.projectForm.address = selectedObject.address
},
},
Here is what I can from the browser console in the Vue tab.
{"id":"op234Sd3FBZHwfLpk16n","companyId":"zErEDd6jE4a0H6bY8u77","name":"Test Customer","email":"test#customer.com"}
In data section, I can Object but no data.
I feel like I am missing something small, no idea what it is.
Thanks in advance for your help!

ais-refinement-list in VueInstantSearch(Algolia) doesn't renders list

I have stucked with an issue using refinement list widget of algolia.
First of all my resulting data structure is like that:
[
{
objectID: 999,
title: 'some title',
categories: [
{
id: 444,
name: 'some name',
},
{...},
]
}
]
I have that type of structure on my page:
<ais-instant-search
:search-client="searchClient"
:initial-ui-state="{
index_Name: { query: searchedValue },
}"
index-name="index_Name"
>
<ais-index index-name="index_Name">
<ais-configure
:filters="facetsFilters"
:facets="['categories.id']"
:hits-per-page.camel="items"
/>
<ais-refinement-list attribute="categories.id" />
<div> ...Some other widgets nested in divs as ais-search-box, ais-sort-by, etc </div>
</ais-index>
</ais-instant-search>
Within ais-configure I have passed to filters a facetsFilters variable which contains string with such content:
"categories.id:1 OR categories.id:5"
and it works ok, I'm getting results within selected categories,
problems starts, when i try to get refinement-list here:
<ais-refinement-list attribute="categories.id" />
I have an empty list despite that on dashboard this attribute is added as an attributesForFacetings and in ais-configure filters parameters with categories.id in it also works well.
Any suggestions is highly appreciated !

Problem was in Dashboard of Algolia.
When we clicked on 'searchable' instead of 'filter only' radiobutton for chosen attributeForFaceting - everything starts working good.

For sibling communication between many identical components, how should I store the data in the lowest-common ancestor?

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
});

Vue did not read my child component in v-for loops

What's wrong: Vue returns an empty array on when I console.log it. However when I clicked it in Developer Tools, the data was there!
Background story: I was actually trying to make a total value of child's data wheter child has this value or not, however upon trying to just opening the component data none showed up!
P.S. The child data will automatically updated every X seconds.
The result of console.log(this.$children); shows [] (empty array) in console. But when I clicked it, it opens the whole children array. But when I tried to reveal it via this.$children[0], it shows value of undefined!
So here's my link to JSFiddle https://jsfiddle.net/irfandyjip89/zmn5yhju/
Vue.component("comp", {
props: ["location"],
template: "#comp"
})
vm = new Vue({
el: "#vm",
data: {
location: [{
nation: "America",
money: "Dollar"
}, {
nation: "China",
money: "Yuan"
}, {
nation: "Thailand",
language: "Baht"
}]
},
computed: {
totalNation() {
console.log(this.$children)
return this.location.length
}
}
})
<section id="vm">
Total of Nations : {{totalNation}}
<comp v-for="loc in location" :location="loc.nation"></comp>
Child : {{$children}}
</section>
<template id="comp">
<li>{{location}}</li>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
What should happen:
I can access children's data.
Please feel free to ask for more information.

Get ancestor route params in Angular?

I have the following route hierarchy :
const appRoutes:Routes = [
{
path: 'article',
component: ArticleComponent,
children: [
{
path: '',
component: ArticleListComponent
},
{
path: ':articleId',
component: ArticleDetailComponent,
children: [
{
path: '',
component: PageListComponent
},
{
path: ':pageId',
component: PageComponent
}]
}]
},
{path: '**', component: DefaultComponent},
];
When I click the Article link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo"
And then I see this :
Now , When I click at Article 2 , the page is navigated to
"https://run.plnkr.co/article;listData=foo/2;detailData=bar"
And then I see this :
Now , when I click at the Page 33 link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
And then I see this:
OK
As you can see , at the innermost component ( the single page component) , I set some code to see the current params :
Page component! {{params | json}}
Which is populated in :
export class PageComponent {
constructor(private activatedRoute_:ActivatedRoute) {
activatedRoute_.params
.subscribe(params => {
this.params=params;
});
}
Question:
Currently the value of params value - is only { "pageId": "33", "detailData": "kro" } which belongs to the final route.
But how can I get the previous routes values ?
I know I can read the querystring but I find it an unconventional way .
The innermost url is :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
So basically I'm asking how can I extract all the parameters from prev routes.
( I mean what are the values for articleId , listData , detailsData (the first one) )?
PLNKR

You can get all parents params using snapshot. In detail component:
let node = activatedRoute_.snapshot;
while(node) {
console.log('component', node.component.name, ', params:', node.params);
node = node.parent;
}
component ArticleDetailComponent ,
params: Object {articleId: "1", detailData: "bar"}
component ArticleComponent , params: Object {listData: "foo"}
component RootComponent , params: Object {}

You should be sending the listData value along with the object.Modify this to your app/article-list.component.ts Component
<a [routerLink]="[articleId, {listData:'foo',detailData: 'bar'}]">
LIVE DEMO

You can manually send params when calling the states inside the links, but to be honest this is not the best solution.
My better suggestion is to use the resolve blocks of the states and implement resolvers in order to achieve that.
Every state will have the corresponding resolver which will resolve the params you need from the previous state.
Here the link to the documentation:
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
The concept is that inside the resolve of the i state, you can still access the state parameters of the i-1 state, so you can pass them to the new state.