uni-app提示：非h5平台 :key 不支持表达式 arrayKey?item.$orig[arrayKey]:index

在uni-app中，确实存在这样一个限制，即在非H5平台上，:key 属性不支持表达式。这通常会导致在使用列表渲染时（如 v-for），我们需要为每一个列表项提供一个唯一的 key 值。如果尝试使用表达式来动态决定 key，比如在 arrayKey 存在时使用 item.$orig[arrayKey]，否则使用 index，你可能会在非H5平台上遇到错误。

为了解决这个问题，我们可以采用一个计算属性或者方法，在数据绑定之前预处理 key 值。以下是一个示例，展示如何在Vue组件中预处理 key 值，以便在非H5平台上使用。

<template>
  <view>
    <view v-for="(item, index) in processedItems" :key="item.key">
      <!-- 你的列表项内容 -->
      {{ item.content }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { name: 'Item 3' }, // 注意这个对象没有id
      ],
      arrayKey: 'id', // 你想用作key的字段名
    };
  },
  computed: {
    processedItems() {
      return this.items.map((item, index) => {
        // 根据arrayKey是否存在来决定key的值
        const key = item[this.arrayKey] !== undefined ? item[this.arrayKey] : index;
        // 你可以根据需要添加其他处理逻辑
        return {
          key,
          content: item.name, // 假设你想显示name
        };
      });
    },
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>

在这个例子中，我们使用了 computed 属性 processedItems 来预处理数据。对于每个 item，我们检查 arrayKey（在这个例子中是 'id'）是否存在，如果存在，我们使用它的值作为 key，否则我们使用 index。然后，我们在模板中使用这个预处理后的数据列表进行渲染。

这种方法避免了在模板中使用复杂的表达式，并且确保了 key 的唯一性和正确性，即使在非H5平台上也能正常工作。