Блог

Я борюсь со ссылкой на элемент в VueJS 3, CompositeAPI. Моя реализация выглядит следующим образом:

 <div ref="myIdentifier"></div>

setup() {
  const myIdentifier = ref(null);
  onMounted(() => {
    console.log(myIdentifier.value); // returns a Proxy object. WHY??? it should return the Element object
    console.log(myIdentifier.value.$el); // returns the Element object
    // !!! to mention here:
    // TypeScript complains about TS2339 Property ... does not exist on type 'never'
    // if escaped myIdentifier.value?.$el, if, even myIdentifier.value!.$el: TS2533: Object is possibly 'null' or 'undefined'

  });

  return {};
}, 
 

Предположительно, я делаю здесь что-то не так. Моя цель-сделать доступной ссылку на элемент (HTML). Я сомневаюсь, что для того, чтобы получить доступ к этому элементу, здесь требуется так много побега или что этого так трудно достичь.

Заранее спасибо.

Во-первых, поскольку вы используете TypeScript, укажите, что myIdentifier на самом деле есть.

 const myIdentifier = ref<HTMLDivElement>(); // Ref<HTMLDivElement | undefined>
 

Теперь, чтобы получить доступ к ссылочному HTML-элементу, вы делаете

 onMounted(() => {
      console.log(myIdentifier.value) // HTMLDivElement | undefined
      console.log(myIdentifier.value?.style) // CSSStyleDeclaration | undefined
});
 

Конечно , вы не можете безопасно получить доступ к свойствам myIdentifier.value , поэтому необходим знак вопроса myIdentifier.value?.style , потому что он может быть неопределенным. Когда? Например, если вы не добавляете ref="myIdentifier" в свой html-элемент.

Но в вашем случае это всегда не определено, потому что вы не возвращаете ссылку на шаблон myIdentifier из setup() функции

 setup() {
  const myIdentifier = ref<HTMLDivElement>();

  onMounted(() => { /* do sth with myIdentifier */ });

  return { 
    myIdentifier 
  };
}, 
 

И проблема решена.

Редактировать: Теперь я также отвечу на ваш другой вопрос

console.log(taskSliderCard.значение); // возвращает прокси-объект. почему???

Не уверен на 100%, что taskSliderCard это такое, но, скорее всего, это ссылка на компонент Vue ( <TaskSliderCard ref="taskSliderCard" /> ). В этом случае taskSliderCard.value возвращает экземпляр компонента, а не HTML-элемент.

Поскольку он не возвращает HTML-элемент, вам также нужно будет указать другой тип для вашей taskSliderCard ссылки внутри setup() , например, таким образом:

 import { TaskSliderCard } from 'your-ui-library'
...
setup() {
    // Get the type of TaskSliderCard component
    // So TypeScript compiler knows its properties
    const taskSliderCard = ref<InstanceType<typeof TaskSliderCard>>();

    onMounted(() => {
      console.log(taskSliderCard.value?.$el) // HTMLElement | Undefined

    });

    return { taskSliderCard};
},