Question

我有一些来自Vuetify的v文本字段，具有特定的背景色。看起来像这样（试图删除不相关的信息）：

<v-text-field id="someId" ref="someRef" background-color="someColor"
:label="attributeName"
v-model=someValue
outline
clearable
></v-text-field>

我想通过js访问background-color属性，以便在发生某些事件时进行更改。但我不知道如何访问此值。我可以使用：background-color = outlineColor手动更改它例如

data() {
return {
outlineColor: "blue"
}
 },

，然后在javascript中分配outlineColor =“ someOtherColor”。

但是由于我有多个文本字段（通过v-for创建），并且我想单独更改所有文本字段的颜色，因此我需要手动访问特定的文本字段及其背景颜色，而不是为了更改所有文本字段。

我尝试过

this.$refs.someRef

但在那里找不到背景色。

我也尝试在以下位置找到它

document.getElementById("someId").style

但是我唯一能找到的是backgroundColor（不是background-color），它会更改文本的背景颜色，而不是轮廓颜色（输入字段周围框架的颜色）。希望你能想象得到。

感谢您提前提供任何提示，卡尔萨里

Answer 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事件来修改正确的值，使用索引选择正确的模型而不是计算的属性，或者找出完全不同的东西。

如何以编程方式从vuetify元素访问属性？

1 个答案: