Question

在这种情况下，我使用v-for将JSON中的大量数据显示为单独的按钮。我想做的是，当我单击这些按钮中的一个时，该按钮的背景颜色将改变。我想使用@click将功能绑定到每个按钮，然后在该功能中执行这样

theButtonDOM.style.backgroundColor = 'black';

那么，如何获得由v-for生成div元素的DOM？或任何其他解决此“背景颜色变化”问题的解决方案？

Answer 1

您可以通过$event

<button @click="changeColor($event)"></button>

然后使用您的方法

this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }

Answer 2

您可以使用<div class="task-group" *ngFor="let object of result | keyvalue"> <span class="column-title"> {{ object?.value?.length }} Items to display </span> <ng-container *ngIf="object?.value?.length"> <div class="task-item" *ngFor="let item of object.value"> {{ item.idRec }} </div> </ng-container> </div>和@click。当您单击某个项目时，其索引将存储在v-bind:class中。然后selectedItem会自动将类添加到v-bind:class等于index的项目中。

selectedItem

new Vue({
  el: '#app',
  data: {
    selectedItem: ""
  },
  computed:{},
  methods: {}
  }
)

.selectedItemClass {
  background-color:green
}

Answer 3

每次在Vue模板中触发click事件时，您都可以访问该事件，并在函数中添加特殊变量$ event作为参数。

<button @click="my_method($event, other parameter)"></button>

，然后在方法内部访问事件的目标：

methods: {
    my_method(event, other_paramethers) {
        let button = event.target
}
}

即使只是将方法绑定到@click事件而没有任何参数，您也可以将事件作为第一个参数来访问。

<button @click="my_method"></button>
...
methods: {
    my_method($event) {
        let button = $event.target
}
}

然后您就可以使用按钮了。

查看this stackoverflow question和the Vue documentation以获得更多详细信息。

Answer 4

我假设您希望按钮充当单独的开关，而不是@ eag845的答案中所实现的radio group。

您可以在JSON对象中添加一个'clicked'布尔属性。

arrayOfJSONObjects.forEach(object => object.clicked = false); // Add 'clicked' attribute and init to false

然后使用该属性作为条件，使用v-bind:class或:class绑定CSS类，然后在@click内或放置在{{1 }}。

@click

Stylez

<button
    v-for="btn in arrayOfJSONObjects"
    :class="{ 'button--activated': btn.clicked }"
    @click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>

如何在Vue.js中操作DOM

4 个答案: