Obtengo una view de utilería de un componente principal y, en función de esa utilería, quiero asignar el objeto currentView de un mapa. Pero no puedo hacer que funcione. ¿Qué estoy haciendo mal aquí?
Supongamos que, si la propiedad de view es people , entonces cuando registro en la consola el objeto currentView , debo hacer que peopleArray y name sean 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: {} } }Puede agregar immediate: true a su observador:
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>Que el valor de la propiedad dependa de otro valor significa que este es el caso de la propiedad calculada:
computed: { currentView() { const viewOptions = {...}; return viewOptions[this.view]; } ...