vue中v-for循数组arr，div中显示对象中的某个值，比如item.name，此div为横向排列的，点击item.name时获取此元素距离页面左侧的距离，使用以上方法this.$refs[item.id]undefined

好的，你的问题是如何在 Vue 中使用 v-for 循环数组并在 div 中显示对象中的某个值，然后获取此元素距离页面左侧的距离，但是在使用 `this.$refs[item.id]` 时出现了 undefined 错误。

首先，你可以在 v-for 中循环数组 arr，并使用 item.name 在 div 中显示对象中的某个值。示例代码如下：

<div v-for="item in arr" :key="item.id">{{ item.name }}</div>

对于获取元素距离页面左侧的距离，可以使用 `offsetLeft` 属性。但是，在使用 `this.$refs[item.id]` 时出现了 undefined 错误，这可能是因为您没有正确设置 ref 属性。

请确保在 v-for 中为每个元素设置唯一的 ref 属性，如下所示：

<div v-for="item in arr" :key="item.id" :ref="item.id">{{ item.name }}</div>

然后，在需要获取距离的地方，您可以使用以下代码：

let element = this.$refs[item.id][0];
let distance = element.offsetLeft;

这里，我们首先使用 `this.$refs[item.id]` 获取元素的引用，然后使用 `[0]` 选择该元素的第一个实例（因为 ref 可能对应多个元素）。最后，我们使用 `offsetLeft` 属性获取元素距离页面左侧的距离。

希望这个回答能够解决您的问题。