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

<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>

 

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

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

 this.options 指向哪儿 你的data里面也么的定义吧?还是你少写其他东西了

 

您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

帮到你了点个采纳吧,求你了

一般放在created里面吧,你有什么特殊需求吗?