为什么我这个函数在created钩子里调用是正常的,在mounted钩子里就不行?

Question

<template>
  <div>
    <div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="newOptions"
        @change="handleChange"
      />
    </div>

  </div>
</template>

<script>
import mixin from './mixin'
export default {
  name: 'Home',
  mixins: [mixin],
  data() {
    return {
      value: [],
      newOptions: []
    }
  },
  mounted() {
    this.filterOptions1(this.newOptions, this.options)
  },
  created() {
    // this.filterOptions1(this.newOptions, this.options)
  },
  methods: {
    handleChange() {
      console.log('改变了')
    },
    filterOptions() {
      const str = JSON.stringify(this.options)
      console.log(str)
      let str1 = str.replace(/(city|area)/g, (s) => {
        return 'children'
      })
      str1 = str.replace(/name/g, (s) => {
        return 'label'
      })
      console.log(str1)
    },
    // 想要的结构  [{label:'',value:'',children:[]}]
    // 结构 [{name:'',city:[{name:'',area:['','','']}]}]
    filterOptions1(newObj, obj) {
      for (const key in obj) {
        const label = obj[key]['name']
        const citys = obj[key]['city']
        const newCitys = []
        for (const city in citys) {
          const cityLabel = citys[city]['name']
          const areas = citys[city]['area']
          const newAreas = []
          areas.forEach((item, index) => {
            const newArea = { label: item, value: item }
            newAreas.push(newArea)
          })
          const c = { label: cityLabel, value: cityLabel, children: newAreas }
          newCitys.push(c)
        }
        newObj[key] = { label, value: label, children: newCitys }
      }
    }
  }
}
</script>

<style>

</style>

Answer 1

首先，你的options是一个数组，我们知道，对于数组想要实现数据双向绑定直接更改里面的内容是不行的。所以你那个filterOptions1方法本质上是错误的。

至于为什么在created里有用，而mounted没用，是因为在created里就给数据赋值了，这个赋值是在页面渲染之前，所以你会看到页面渲染成功，但是其实这是个假象，因为这个并不是双向绑定的。你如果用你的filterOptions1方法再给里面的数据做改动处理，你会发现里面的数据还是你created时候的数据。