assigning values from a map-CodePudding

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: {}
   }
 }

CodePudding user response：

You can add immediate: true to your watcher:

Vue.component('Child', {
  template: `
    <div >
      {{ 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>

CodePudding user response：

That property value depends on another value means this is the case for computed property:

computed: {
  currentView() {
     const viewOptions = {...};
     return viewOptions[this.view];
  }
  ...