Question

我可能从一开始就完全采用了错误的方式，因此欢迎大家提出建议。

我试图创建一个基本页面，在其右侧输入，在左侧显示输入提示，当您专注于输入时，相应的提示将突出显示在左侧。

这里有一个JSFiddle：https://jsfiddle.net/eywraw8t/210693/

这不起作用，因为我不知道如何找到合适的提示来突出显示（并将所有其他提示上的isHighlighted设置为false）。

我设法通过在字段对象上添加突出显示的道具而不使用提示组件来获得一个工作示例。但是实际上，字段数据将来自数据库，因此它没有高亮显示的参数，因此提示组件似乎更明智。

简单来说，我的问题是：当专注于输入时，如何找到相关的提示组件？

JS Fiddle显示了没有组件的功能：https://jsfiddle.net/as2vxy79/

尝试使用组件的破碎的JS Fiddle：https://jsfiddle.net/eywraw8t/210693/

这是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)
      })
    }
  }
})

Answer 1

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

您只需要做的就是添加一个数据字段，该字段存储要突出显示的字段ID，然后根据选定的ID有条件地将一个类添加到要突出显示的提示中（或有条件地呈现组件）。 / p>

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;
    }
  }
})

Here's an update到您的小提琴。

注释：

如果您真的需要直接引用，则可以使用ref directive（这也可以在v-for生成的组件列表中使用）。
您可能应该考虑使用工具提示作为提示。例如。使用Element UI的Tooltip。

更新：

因此，here's a solution使用ref指令来获取对突出显示的hint组件的引用。您可以看到我在:ref中使用了字段ID，但是由于周围有this.$refs[focusedFieldId]，因此您仍然可以从v-for获取数组。除此之外，这非常简单。

我还更新了hint组件以接受is-highlighted道具，以便它可以自行更改其类（您之前为此使用了data属性，这不会导致组件更新）。

如何遍历VueJS中的组件列表

1 个答案: