>

처음부터이 문제에 대해 완전히 잘못 알고 있었으므로 모든 조언을 환영합니다.

오른쪽에 입력과 왼쪽에 입력에 대한 힌트가있는 기본 페이지를 만들려고하고 입력에 초점을 맞출 때 적절한 힌트가 왼쪽에 강조 표시됩니다.

여기에 JSFiddle이 있습니다 : https://jsfiddle.net/eywraw8t/210693/

강조 표시 할 적절한 힌트를 찾는 방법을 모르기 때문에 작동하지 않습니다 (다른 모든 힌트에서는 isHighlighted를 false로 설정).

나는 힌트 구성 요소를 사용하지 않고 필드 객체에 강조 표시된 소품을 추가하여 실제 예제를 얻었습니다. 그러나 실제로 필드 데이터는 데이터베이스에서 가져 오므로 강조 표시된 매개 변수가 없으므로 힌트 구성 요소가 더 합리적으로 보입니다.

질문을 간단하게 설명하려면 : 입력에 집중할 때 관련 힌트 구성 요소를 어떻게 찾을 수 있습니까?

구성 요소없이 기능을 보여주는 JS Fiddle : https://jsfiddle.net/as2vxy79/

Broken JS Fiddle은 구성 요소를 사용하려고합니다 : https://jsfiddle.net/eywraw8t/210693/

JS Fiddle 외부의 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)
      })
    }
  }
})

  • 답변 # 1

    짧은 대답 :반응성을 사용하여이 문제를 해결할 수 있으므로 힌트를 표시하는 구성 요소에 대한 직접적인 참조가 필요하지 않습니다.

    강조 할 필드 ID를 저장하는 데이터 필드를 추가 한 다음 선택한 ID를 기준으로 강조 표시 할 힌트에 클래스를 조건부로 추가하거나 조건부로 구성 요소를 렌더링하는 것입니다.

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

    여기에 바이올린 업데이트가 있습니다.

    <시간>

    노트 :

    직접 참조가 필요한 경우 ref 를 사용할 수 있습니다  지시문 (이것은 v-for 에 의해 생성 된 구성 요소 목록에서도 작동합니다. ).

    힌트에 툴팁 사용에 대해 생각해야합니다. 예 : Element UI 툴팁 사용

    <시간>

    업데이트 :

    그래서 ref 를 사용하는 해결책이 있습니다.  강조 표시된 hint 에 대한 참조를 얻기위한 지시문  구성 요소. :ref 에서 필드 ID를 사용했음을 알 수 있습니다.  하지만 여전히 this.$refs[focusedFieldId] 에서 배열을 얻습니다.  주변 v-for 가 있기 때문에 . 그 외에는 매우 간단합니다.

    나는 또한 hint 를 업데이트   is-highlighted 를 수락하는 구성 요소  prop 자체로 클래스를 변경할 수 있습니다 (이전에 데이터 속성을 사용하여 구성 요소를 업데이트하지 않음).

  • 이전 Docker 인터프리터를 사용할 때 PyCharm이 Python 종속성을 찾지 못합니다
  • 다음 자바 배열과 입력