如何访问vue-mc模型的键？Vue.js模型集合访问问题求助

看起来你遇到的核心问题是：自定义的ClientModel实例属性没有被Vue的响应式系统正确追踪，导致子组件没法直接访问item.name这类属性。之前用axios直接返回普通对象能正常工作，是因为Vue会自动把普通对象转为响应式，但自定义类实例的属性需要我们手动处理响应式绑定。

下面是具体的解决方案，分Vue 2和Vue 3两种场景说明：

一、让ClientModel的属性成为响应式 #

Vue 2 实现方式 #

在ClientModel类里，借助Vue.observable把API返回的普通数据转为响应式，并直接挂载到实例上，这样属性就能被Vue的响应式系统追踪到：

// ClientModel.js
import Vue from 'vue'

export default class ClientModel {
  constructor(clientData) {
    // 将API数据转为响应式后挂载到Model实例
    Object.assign(this, Vue.observable({ ...clientData }))
  }

  // 可添加Model的业务方法，比如保存数据
  async save() {
    return await axios.put(`/api/clients/${this.id}`, this)
  }
}

Vue 3 实现方式 #

Vue 3里用reactiveAPI来处理响应式：

// ClientModel.js
import { reactive } from 'vue'

export default class ClientModel {
  constructor(clientData) {
    Object.assign(this, reactive({ ...clientData }))
  }
}

二、集合(Collection)的fetch方法处理 #

在集合的fetch方法里，确保把API返回的每个普通对象都实例化为ClientModel，这样得到的数组元素都是带响应式属性的实例：

// ClientCollection.js
import ClientModel from './ClientModel'
import axios from 'axios'

export default class ClientCollection {
  constructor() {
    this.items = [] // 存储Model实例的数组
  }

  async fetch() {
    const res = await axios.get('/api/clients')
    // 把每个API返回对象转为ClientModel实例
    this.items = res.data.map(item => new ClientModel(item))
    return this.items
  }
}

三、父组件与子组件的使用 #

父组件正常初始化集合并调用fetch：

// ParentComponent.vue
export default {
  data() {
    return {
      clients: new ClientCollection()
    }
  },
  async mounted() {
    await this.clients.fetch()
  }
}

子组件接收集合后，直接遍历clients.items访问属性即可：

<!-- ChildComponent.vue -->
<template>
  <div class="client-list">
    <div v-for="item in clients.items" :key="item.id" class="client-item">
      <!-- 现在可以直接访问item.name了 -->
      <h3>{{ item.name }}</h3>
      <p>{{ item.email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    clients: {
      type: Object,
      required: true
    }
  }
}
</script>

额外排查点 #

• 如果ClientModel后续需要新增属性（不是API返回的），Vue 2里要使用Vue.set(this, 'newProp', value)来添加；Vue 3里直接赋值即可，reactive会自动追踪新增属性。
• 不要把属性存在Model的私有变量里（比如this._data = ...），除非你提供了对应的getter方法，否则子组件无法直接访问。

内容的提问来源于stack exchange，提问作者Tarvo Mäesepp