从地图中赋值

Question

我从父组件获得了一个道具 view，基于该道具，我想从地图中分配 currentView 对象。但我无法让它工作。我在这里做错了什么？

假设，如果 view 道具是 people 那么当我控制台记录 currentView 对象时，我应该得到 peopleArray 和名字成为人的世界。

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

Answer 1

您可以将 immediate: true 添加到您的观察者：

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>

Answer 2

属性值取决于另一个值意味着计算属性:

就是这种情况

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

从地图中赋值

assigning values from a map

javascript

vue.js

vuejs2