想请问个问题为何this里的值打不出

Question

问题描述

selectDevice这个值在console的时候一直是date里设置的默认值

问题出现的环境背景及自己尝试过哪些方法

貌似只有update里能输出，不知道为什么，尝试了created和mounted都不行，this.selectDevice = 方式也改成了this.selectDevice.push也不行

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <div class="app-container">
    <el-form>
      <el-form-item label="选择设备">
        <el-select v-model="selectDevice" placeholder="请选择" @change="getBindDeviceId">
          <el-option
            v-for="item in bindDeviceGroup"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-tabs
      v-model="panelActiveName"
      type="card"
      @tab-click="handleClick">
      <el-tab-pane
        v-for="(item,index) in functionItems"
        :key="item.id"
        :label="item.funcName"
        :value="item.id"
        :name="index.toString()"
      >
        <face-recognition
          :func-date-list="funcDateList"
          :device-id="deviceId"
          :func-id="funcId"/>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import { bindDevice, getDeviceFuncItems, getDeviceFuncList } from '@/api/device'
import faceRecognition from '@/components/haikang/faceRecognition'
import realAuth from '@/components/haikang/realAuth'

export default {
  components: {
    faceRecognition,
    realAuth
  },
  props: {
    platformId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      panelActiveName: '0',
      selectDevice: 0,
      deviceId: 0,
      funcId: 0,
      bindDeviceGroup: [],
      functionItems: [],
      flag: true,
      funcDateList: []
    }
  },
  created() {
    this.getBindDevice()
  },
  mounted() {
    console.log('888', this, this.selectDevice)
  },
  updated() {
    if (this.flag) {
      this.deviceId = this.selectDevice
      getDeviceFuncItems(this.selectDevice).then(response => {
        const arry = response.BusinessData
        this.functionItems = arry
      })
      this.flag = false
    }
  },
  methods: {
    handleClick(tab, event) {
      const _this = this
      this.funcId = tab.$attrs.value
      getDeviceFuncList(this.funcId, this.deviceId).then(response => {
        const dataArr = response.BusinessData
        dataArr.forEach(function(ele) {
          ele.funcStatus = _this.deviceStatus(ele.funcStatus)
        })
        this.funcDateList = response.BusinessData
      })
    },
    getBindDevice() {
      // 获取已绑定设备
      bindDevice(this.platformId).then(response => {
        const device = response.BusinessData
        this.bindDeviceGroup.push(device)
        this.selectDevice = this.bindDeviceGroup[0][0].id
      })
    },
    // 选中时获取设备Id
    getBindDeviceId(id) {
      this.deviceId = id
      // 获取设备功能列表
      getDeviceFuncItems(id).then(response => {
        this.functionItems = response.BusinessData
      })
    },
    /* 设备状态格式化 */
    deviceStatus(value) {
      const types = {
        0: '未激活',
        1: '已激活'
      }
      return types[value]
    }
  }
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

输出赋值后的内容

Answer 1

试了一下你的代码 没什么问题啊 初始值是可以打出来的。。。

你这个问题就有点尴尬了 created mounted只在页面刚加载时执行一次 只有刷新或者切换路由才会执行

你在方法里面值变化 不能再created里面打印啊 那还是初始值 他已经走过这个钩子了

你还没明白钩子函数呢 再好好看看

Answer 2

有下面两个图，简化之后是可以显示出来的。然后查看代码，显示不出来是什么意思呢？看上去赋值只有那一块，是不是赋值了一个 undefined