I get a prop view from a parent component and based on that prop, I want to assign the currentView object from a map. But I can't get it to work. What am I doing wrong here?
Suppose, if the view prop is people then when I console log currentView object, I should get the peopleArray and name to be people world.
export default {
props: {
view: {
type: String,
required: true,
},
},
watch: {
view: {
handler(val) {
const viewOptions = {
people: {
array: this.peopleArray,
name: 'People world',
},
robots: {
array: this.robotArray,
name: 'Robot world',
},
};
this.currentView = viewOptions[val];
console.log(this.currentView.array) //when I console log this, I want to get the peopleArray or robotArray
},
},
},
data(){
return{
peopleArray: ['Sam', 'Rob'],
robotArray: ['Wall-E', 'R2D2'],
currentView: {}
}
}
You can add immediate: true to your watcher:
Vue.component('Child', {
template: `
<div class="">
{{ currentView }}
</div>
`,
props: {
view: {
type: String,
required: true,
},
},
watch: {
view: {
immediate: true,
handler(val) {
const viewOptions = {
people: {
array: this.peopleArray,
name: 'People world',
},
robots: {
array: this.robotArray,
name: 'Robot world',
},
};
this.currentView = viewOptions[val];
immediate: true
console.log(this.currentView.array) //when I console log this, I want to get the peopleArray or robotArray
},
},
},
data(){
return{
peopleArray: ['Sam', 'Rob'],
robotArray: ['Wall-E', 'R2D2'],
currentView: {}
}
},
})
new Vue({
el: '#demo',
data() {
return {
type: 'people'
}
},
methods: {
change() {
this.type === 'people' ? this.type = 'robots' : this.type = 'people'
console.log(this.type)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="change">change</button>
<child :view="type" />
</div>That property value depends on another value means this is the case for computed property:
computed: {
currentView() {
const viewOptions = {...};
return viewOptions[this.view];
}
...