Using v-for to get unique ID of elements and access specific IDs in CSS

user_14661041 0
Viewed 353

I am trying to identify each element of a v-for directive with a unique ID, so I can access the HTML object with the ID and change its CSS. Currently, this is my HTML with Vue.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="assets/js/vue@2.6.12/dist/vue.js"></script>
    <title>remoteProto</title>     
    <style type="text/css">
    html,

      .switch {
          white-space: nowrap;
          display: inline-block;
          padding: 30px;
          background-color: rgb(255, 223, 223);
          background-repeat: no-repeat;
          background-size: 100%;
          position: relative;
          top: 24px;
          right: 194px;
          transform: rotate(0deg);
      }

      .switch.closed {
          background-image: url(assets/image/switch-closed.svg);
          background-position: 0px 0px;
      }

      .switch.opened {
          background-image: url(assets/image/switch-opened.svg);
          background-position: 0px -7.5px;
      }

    </style>
  </head>
  <div id="app">
    <fieldset style="background-color: rgb(181, 207, 209);">
    <h1>simTest server</h1>
        <hr>
        <div class="circuitplan">
            <div v-for="(val, key) in switchObj" v-bind:key="key">
                  <div>{{ key }}
                    <span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened' }" @click="onSwitchClick(key)" ></span>
                  </div>
                </div>
        </div>
    </fieldset>
</div>
<script>

  const app = new Vue({
    el: '#app',
    data () {
      return {
        ws: null,
        idCount: 1,
        url: 'ws://localhost:3000',
        switchObj: {
                  /*'K1': 'opened',
                    'K2': 'opened',
                    'K3': 'opened'
                  */
        },  
        sentObj: {},
      }
    },
  })
  
</script>
</html>

How can I change the CSS of this specific ID? Let's say "key" is named the following: "K1", "K2", "K3", ... The class is "switch". I know this is not right but to illustrate what I mean, I would like to have something like this:

switch.K1 {other position than e.g. K2} switch.K2 {...}

Also, the switch is bound to close and opened, see the CSS. I guess my syntax of the HTML reveals me being a noob. Anyway, I hope you guys can help me, thank you!

vue.js css html
1 Answers

You have two choices :

1- defining an unique for each element then define its style like :

K1{
...
}
K2{
...
}
...
Kn{
...
}

template (key represents KEY1 KEY2 ...):

 <div v-for="(val, key,index) in switchObj" v-bind:id="key">

2- to define a data property that contains the style of each element and bind it the element using the key:

 url: 'ws://localhost:3000',
  style:{
    K1:{
        color:'red'
     },
     K2:{
        color:'geen'
     }
  }

in template use inline style binding :

<div v-for="(val, key,index) in switchObj" v-bind:style="style[key]">
user_81728570
Related