Javascript 如何在VueJS中循环浏览组件列表

我可能从一开始就完全走错了方向，所以欢迎所有建议

我正在尝试创建一个基本页面，右侧有输入，左侧有输入提示，当您关注输入时，相应的提示会在左侧突出显示

这里有一个JSFiddle：

这将不起作用，因为我不知道如何找到要高亮显示的适当提示（并在所有其他提示中将isHighlighted设置为false）

我在field对象上添加了一个高亮显示的道具，而没有使用提示组件，从而获得了一个有效的示例。然而，实际上字段数据将来自数据库，因此它不会有突出显示的参数，因此提示组件似乎更合理

简单地说，我的问题是：当我关注一个输入时，如何找到相关的提示组件

JS Fiddle显示没有组件的功能：

尝试使用组件时损坏的JS Fiddle：

以下是JS外部JS提琴：

Vue.component('hint', {
    template: `
    <div class="hint" :class="{'highlight-hint': isHighlighted }">
      <slot></slot>
    </div>
  `,
  data() {
    return {
        isHighlighted: false
    }
  }
});

new Vue({
  el: "#app",
  data: {
    fields: [
      {
        'id': 'name',
        'hint': 'Put the name here'
      },
      {
        'id': 'description',
        'hint': 'Put the description here'
      },
      {
        'id': 'more',
        'hint': 'Put more here'
      }
    ]
  },
  methods: {
    onFocus(focusedField) {
        // Somehow loop through the hints
      // I am aware there is no "hints" property this is an example
      this.hints.forEach(function(field) {
        field.isHighlighted = (focusedField == field.id)
      })
    }
  }
})

Vue.component（'hint'{
模板：`
`,
数据（）{
返回{
石广生：错
}
}
});
新Vue({
el:“应用程序”，
数据：{
字段：[
{
“id”：“name”，
'提示'：'在此处输入名称'
},
{
'id'：'description'，
'提示'：'将描述放在这里'
},
{
“id”：“更多”，
'提示'：'在此处放置更多信息'
}
]
},
方法：{
onFocus（焦点字段）{
//以某种方式循环浏览这些提示
//我知道没有“提示”属性，这就是一个例子
this.hints.forEach（函数（字段）{
field.ishighlight=（focusedField==field.id）
})
}
}
})

简短回答：您不需要直接引用显示提示的组件，因为您可以使用反应性解决此问题

您只需要添加一个数据字段来存储要高亮显示的字段id，然后根据所选id有条件地向要高亮显示的提示中添加一个类（或有条件地呈现组件）

听你的

---

注意事项：

• 如果确实需要直接引用，可以使用

  ref

  （这也适用于

  v-for

  生成的组件列表）
• 您可能应该考虑使用工具提示作为提示。例如，使用元素UI

---

更新：

因此，使用

ref

指令获取对突出显示的

hint

组件的引用。您可以看到我在

：ref

中使用了字段id，但您仍然可以从

中获得一个数组。$refs[focusedFieldId]

，因为周围有一个

v-for

。除此之外，这很简单

---

我还更新了

提示

组件，以接受突出显示的

属性

属性，这样它就可以自己更改其类（您以前为此使用的数据属性不会导致组件更新）

“字段数据将来自数据库，因此不会有突出显示的参数”，为什么这会阻止您添加它？你不应该告诉组件它被高亮显示，你应该像在你的工作示例中一样在数据上设置它，让组件从数据中学习它应该被高亮显示。干杯，太棒了。我意识到我可能还需要将提示滚动到视图中，这样就可以通过ref访问特定的提示了。你能解释一下吗？简单地在组件上使用ref=“hints”会产生一个非关联数组，因此不清楚如何访问相应的提示。关于工具提示，每个提示可能都非常大（2/3段），因此侧边栏中滚动到视图中的一个指南似乎更合适：）@robjbrain好的，是的，对于工具提示来说，这可能太多了查看我的更新，了解如何使用

ref

指令获取组件引用的示例。谢谢，我接受了您的回答，因为它确实解决了原始问题。尽管我仍然有点不确定如何在$ref内使用组件，但标准方法，如.scrollIntoView（）似乎不可用。虽然这可能是vuejs的一个基本特性，但我需要做更多的阅读/练习。谢谢！这也很简单。您只需访问从

$refs

集合获得的

提示组件上的
$el
即可：
此。$refs[focusedFieldId][0]。$el
提供了作为
提示组件根节点的本机元素。从那里，您可以使用
滚动到视图
或
窗口。滚动到
：。祝你好运
new Vue({
  el: "#app",
  data: {
    highlightedFieldId: '',
    fields: [
      {
        'id': 'name',
        'hint': 'Put the name here'      },
      {
        'id': 'description',
        'hint': 'Put the description here'      },
      {
        'id': 'more',
        'hint': 'Put more here'      }
    ]
  },
  methods: {
    onFocus(focusedFieldId) {
      this.highlightedFieldId = focusedFieldId;
    }
  }
})