Vue2中props传递的selectedclient属性值间歇性显示问题求助

问题根因 #

你遇到的间歇性渲染问题核心原因是Vue2的data()函数仅在组件初始化时执行1次，存在异步时序问题：

• 父组件大概率是通过Laravel接口异步获取selectedclient数据，再传递给当前子组件
• 如果子组件初始化完成时，父组件还没拿到接口返回的selectedclient数据，此时data中初始化的clientname/clientemail等变量拿到的就是undefined，后续selectedclient更新时，这些已经初始化的data变量不会自动同步更新
• 当接口响应速度快于组件初始化速度时，变量能拿到值正常显示，反之就显示为空，自然就出现时好时坏的现象

修复方案 #

方案1：父组件控制子组件渲染（最简单） #

在父组件调用EditClient的标签上添加v-if判断，等selectedclient数据加载完成后再渲染子组件，避免初始化时无数据的情况：

<EditClient :selectedclient="selectedclient" v-if="selectedclient && selectedclient.id" />

方案2：子组件监听props变化同步更新data #

如果需要保留子组件提前渲染的逻辑，可在子组件中添加watch监听selectedclient的变化，自动同步本地data变量：

export default {
  name: 'EditClient',
  props: ['selectedclient'],
  data () {
    return {
      clientname: '',
      clientemail: '',
      clientphone: '',
      clientaddress: ''
    }
  },
  watch: {
    selectedclient: {
      immediate: true, // 组件初始化时也执行一次赋值
      handler (newVal) {
        if (!newVal) return
        this.clientname = newVal.name
        this.clientemail = newVal.email
        this.clientphone = newVal.phone
        this.clientaddress = newVal.address
      }
    }
  },
  // 原有methods逻辑保留
}

额外优化点 #

你当前提交接口的逻辑存在问题：提交时用数组封装参数不利于后端解析，建议改为对象格式，匹配Laravel的参数接收逻辑：

// 原代码var client = new Array(id, name, email, phone, address); 替换为下面的写法
const client = {
  id,
  name,
  email,
  phone,
  address
}

内容的提问来源于stack exchange，提问作者mcrmc101