I have component Comp1 and it's child Comp2. The state of markers is set in the parent component to this object:
var MARKER_ITEMS = {
"item1" : {
"cat" : "wow",
"img" : "slide",
"info" : "bike",
"key" : "1"
},
"item2" : {
"cat" : "omg",
"img" : "slide",
"info" : "4x4",
"key" : "2"
}
};
When I try to generate a Comp2 for each object with loadash _.map, the props get passed down as undefined.
jsfiddle
Your code works but you're using the key name as a props. key is a special reserved property name that React uses in order to know which dynamic children a component has.
If you switch from key to stuff for example, your code will work.
Read here about it and here
Related
My issue is simple but kinda tricky.
I'm inside a v-for, named filter, and I'd like to display thing like item.properties.*value* which is the :items I passed to vuetify autocomplete , and the value has to different in each loop, because the infos to desired are not the same. In other words, I'd like to filter displayed items depending on the object I am.
Notice that the properties is an object with multiples props and I want to display only 1 on the prop in every loop. I did not made any v-forfor this object containing multiples props
The name of the prop I want to show as list on my autocomplete is determined by a variable called "label" that I passed as props in my v-for and therefore, in my looped component which looks like this label : 'filters.mission' (for example, mission)
(I have a traduction file so that's the reason we have a 'filters.mission' here because its all translated, for all the props)
Here is a simple exemple :
// imported array from data I want to display, binded as :items="data"
[
//..stuff
properties : {
"mission": foo,
"driver": bar,
"name": baz,
},
//..stuff
properties : {
"mission": foo2,
"driver": bar2,
"name": baz2,
},
],
In my looped component, I binded my :items="items" and I want to display props like item.properties.mission when my item.label = filters.mission, and so on
But here is the thing :
WORKING
{{ item.properties.mission}} OUTPUT : 'foo', 'foo2'
NOT WORKING
{{ item.properties + label.replace('filters', '') }}
OUTPOUT : [object Object].mission
I tried to parse label.replace('filters', '') but it made me an error.
I also tried to stringify...
Should I write a v-for for my :item object and filter the content ?
item.properties.filter(
(prop) => Object.keys(prop) === label.replace('filters.', ''))
)
If so, where should I filter my object ?
Thanks in advance for anyone answering this !
Because item.properties is an object, you can access mission also using item.properties['mission'].
In your case you can use
{{ item.properties[label.replace('filters', '')] }}
props that I'm getting
props : {
images : Object,
locale : String,
},
data method
data() {
return {
form : this.$inertia.form({
product_images : this.images.data,
}),
}
},
I'm updating project_images on click event like so
Add() {
this.form.product_images.push({image : null});
},
but here problem is that as project_images updated with a new object. it also updates the prop images(Add the object in the data field of images props like product_images). i don't want that prop should be changed because I'm using the old prop value. why is this strange thing happening?
JavaScript arrays are copied by reference, so form.product_images and images.data are referring to the same array in memory. Editing one variable would affect the other.
The solution is to deep copy the original array into a new array. One way to do that is to map the array into newly spread objects:
data() {
return {
form : this.$inertia.form({
product_images : this.images.data.map(x => ({...x})),
}),
}
},
I use Nuxt, just to be clear upfront.
The structure of my project is:
Default Layout -> Servicebar (this is where I want to get the value of service.btnStatus.show)
Index (app) -> Several components that manipulate its parent data (service) object
The 'service' object is a part of my Vue data object in index.js:
data () {
return {
service: {
title: '',
id: -1,
btnNew: false,
btnEdit: false,
btnSave: false,
btnCancel: false,
btnStatus: {
show: false,
value: false
}
}
}
}
I have a 'ServiceBar' component which is set in the default layout. This component contains a 'CheckboxToggle' child component which I want to show or hide using v-if="service.btnStatus.show".
In the 'ServiceBar' component 'service' is a computed prop.
When I try to get the value of a child of 'service', for instance 'title', I have no problem, however when I try to get the value of a grand child, for instance 'show', I get undefined.
v-if="service.btnStatus.show"
in a grand child object is undefined.
Anyone knows why?
I've written a custom render function for a Vue Component, but when I set the "ref" property in the data object that is passed to the createElement function, nothing shows up in the $refs of the root vm (VueComponent)
Vue.component('sm-form-row', {
render: function (createElement) {
// Create the Row Div and append the columns
return createElement('div', {
class: {
'row': true
},
ref: 'some computed value'
});
}
});
What am I missing, the class is being applied correctly but the $refs keep showing empty.
The ref is beign applied and i made a fiddle to see it that it works.
But,if you want to add a reference to sm-form-row component then you have to add the ref attribute in the parent component.For example in parent component:
<sm-form-row ref="formRow" />
And in your parent component you can access it as:
this.$refs.formRow
Also you will be able to access the methods of the child component.For example if the child component has a method called myMethod you can access it in parent component like this:
this.$refs.formRow.myMethod
I am creating a component and want to pass two properties (item & brokerageID) to the component. Here is the HTML code:
{{brokerageID}}
<holiday-component v-bind:item="item" v-bind:brokerageID="brokerageID" testID="45" ></holiday-component>
Here is the code for 'holiday-component'
Vue.component('holiday-component', {
props: ['item',
'brokerageID',
'testID',
],
data () {
return {
holidaysData: [],
showHolidays: false,
}
},
methods: {
getHolidays(contactID) {
....
},
template: <div> {{testID}} {{item.contactName}} {{brokerageID}}
....
The 'item' property is getting passed to the component (item.contactName is displayed correctly in the component template. However, somehow, brokerageID (property of the Vue object) is not getting passed. This property exists which is confirmed as {{brokerageID}} used above the component in HTML displays value. But, within the component template, brokerageID is not available. Also, the testID property passed to the component is not displayed.
Could someone please advise, what is wrong in my implementation that I am unable to use brokerageID in my component?
See Vue's docs about prop naming https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
In this instance, using v-bind:brokerage-id and v-bind:test-id should do the trick.