Как программно получить доступ к атрибутам из элементов vuetify?
У меня есть несколько v-текстовых полей из Vuetify, которые имеют определенный фоновый цвет. Выглядит так (пытался удалить неактуальную информацию):
<v-text-field id = "someId" ref = "someRef" background-color = "someColor"
:label = "attributeName"
v-model=someValue
outline
clearable
></v-text-field>
Я хочу получить доступ к свойству background-color через js, чтобы изменить его при возникновении какого-либо события. Но я не могу понять, как получить доступ к этому значению. Я могу изменить его вручную, используя :background-color=outlineColor например
data() {
return {
outlineColor: "blue"
}
},
а затем назначьте layoutColor = "someOtherColor" в javascript.
Но поскольку у меня есть несколько текстовых полей (созданных с помощью v-for), и я хочу изменить цвета для всех текстовых полей по отдельности, мне нужно получить доступ к конкретному текстовому полю и его цвету фона вручную, а не изменять его для всех текстовых полей. сразу.
я попробовал это с
this.$refs.someRef
но не могу найти там фоновый цвет.
Я также пытался найти его в
document.getElementById("someId").style
но единственное, что я могу найти, это backgroundColor (который не является фоновым цветом), он меняет цвет фона текста вместо цвета контура (цвет рамки вокруг поля ввода). Надеюсь, вы можете себе это представить.
Спасибо за любые подсказки заранее, Калсари
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Не используйте запросы DOM вручную, когда вам это не нужно. Это один из тех случаев, когда вам это действительно не нужно.
Вы меняете цвет фона таким же образом, как вы назначаете разные модели для каждого из ваших текстовых полей. Вы либо создаете вычисляемое свойство, которое позволяет вам легко выбрать поле из объекта, который вы получаете в своем v-for, либо используете индекс v-for для поиска значения.
Например.
<template>
<div>
<template v-for = "textBoxIndex in 5">
<v-text-field
:background-color = "this.colors[textBoxIndex]"
:label = "this.labels[textBoxIndex]"
v-model=this.models[textBoxIndex]
outline
clearable
></v-text-field>
</template>
</div>
</template>
Если вы перебираете реальные объекты, например. с v-for = "myTextbox in myTextboxes" вы можете получить индекс с v-for = "(myTextbox, index) in myTextboxes". Вы можете использовать вычисляемое свойство для изменения объектов myTextbox, которые вы получаете в результате циклического прохождения myTextboxes, но с моделями это будет немного странно. Либо используйте ручные события @input, чтобы изменить правильное значение, используйте индекс, чтобы выбрать правильную модель, а не вычисляемое свойство, либо придумайте что-то совершенно другое.
this.$refs.someRef должен afaik быть массивом, если вы используете v-for для этого элемента. Каждый элемент в этом массиве должен быть самым верхним элементом dom, который определен в v-text-field (возможно, какой-то элемент div). Использовать его было бы сложно, потому что каждый раз, когда вы перерисовываете шаблон (вероятно, из-за того, что некоторые данные изменились), вы потенциально нарушаете фоновый цвет. В конечном итоге вы сталкиваетесь с некоторыми неприятными наблюдателями, обновляющими DOM вручную через эти ссылки.
теперь работает, спасибо. но просто потому, что мне любопытно, даже если это было бы плохой практикой здесь - каков был бы правильный способ доступа к нему через DOM?