仅更改单击按钮的颜色，其他返回原始颜色 VueJS

Question

我有 3 个按钮，当我点击其中一个时，另外两个希望它们恢复原来的颜色

我的html

       <div class="col-md-8 row gutter-sm opts">
          <q-btn 
            id='1'
            class="col-md-2 opt"
            label="OPTIONS 1"
            style="color: white"
            @click="filters(1);"
          />
          <q-btn 
            id='2'
            class="col-md-2 opt"
            label="OPTIONS 2"
            style="color: white"
            @click="filters(2);"
          />
          <q-btn 
            id='3'
            class="col-md-2 opt"
            label="OPTIONS 3"
            style="color: white"
            @click="filters(3);"
          />
       </div>

我的 JS

   methods: {
      filters(id){
         var select = id
         document.getElementsByClassName("opt").style.backgroundColor="white"
         document.getElementById(select).style.backgroundColor='black'
      }
   }

Answer 1

如果你有 VUE，你不应该尝试自己操作 DOM。

添加一个数据变量“selected”并存储所选按钮的id

在渲染时，将样式属性绑定到计算属性，您可以根据数据属性的选定属性设置样式。

为你的按钮做这样的事情：

<button :style="[selected===1 ? {'background': '#333'}: {'background': '#FFF'}]">

然后将选择的内容存储在数据中，因此您的方法仅设置selected = id