Vue Js Adding Dynamic Class name

Question

i am a beginner in Vue JS. I wanted to add class Name i have a simple array using for loop and want to add class name lang-{ARRARY VALUE}

i tried few things seems like it didnt work. i would appreaciate any help from community

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>

    <title></title>

    <!-- BootStrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <!-- JQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<body>

<div id="app">
    {{ message }}

    <p v-for=" x in languages"  v-on:click="call(x)" :id="'obj-'x" style="border:1px solid black; padding: 10px;">
        {{x}}
    </p>

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            languages:["Python", "c++"]
        },
        methods:{
            call:function (x) {
                alert("Hello "+ x);
            }
        }
    })
</script>
</body>
</html>

Yes i want to assign a unique id or class name how can i do that — Soumil Nitin Shah
– Soumil Nitin Shah, Commented Nov 13, 2020 at 11:24

Nicensin · Accepted Answer · 2020-11-13 13:21:32Z

10

:id="'obj-'x"

needs to be this to work

:id="'obj-' + x"

same works with classes

:class="'lang-' + x"

but i prefer template strings if possible

:class="`lang-${x}`"

answered Nov 13, 2020 at 13:21

Nicensin

9531 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Boussadjra Brahim Over a year ago

You're answer is correct, but you've not noticed that a class name like lang-c++ is not valid since + is reserved character in CSS which used to target adjacent sibling element please check this

Amaarockz · Accepted Answer · 2020-11-13 12:23:42Z

4

This is how you do it

<p v-for="(x, index) in languages" :class="'lang-'+x" :key="index"  v-on:click="call(x)" style="border:1px solid black; padding: 10px;">{{x}}</p>

edited Nov 13, 2020 at 12:23

answered Nov 13, 2020 at 11:49

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

1 Comment

Boussadjra Brahim Over a year ago

You're answer is correct, but you've not noticed that a class name like lang-c++ is not valid since + is reserved character in CSS which used to target adjacent sibling element please check this

Boussadjra Brahim · Accepted Answer · 2020-11-13 15:38:59Z

I recommend to use another structure for your languages array like :

    languages: [{
        value: 'python',
        label: 'Python'
      },
      {
        value: 'cpp',
        label: 'C++'
      }
    ]

in this case property value is used as id or class name because a name like c++ is not acceptable in class name, id or any other attribute, and you should also change :id="'obj-'x to :id="'obj-'+x.value

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    languages: [{
        value: 'python',
        label: 'Python'
      },
      {
        value: 'cpp',
        label: 'C++'
      }
    ]
  },
  methods: {
    call: function(x) {
      alert("Hello " + x.label);
    }
  }
})

.lang-cpp {
  color: #4455ff
}

.lang-python {
  color: #44ff44
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}

  <p v-for=" x in languages" :class="`lang-${x.value}`" v-on:click="call(x)" :id="'obj-'+x.value" style="border:1px solid black; padding: 10px;">
    {{x.label}}
  </p>

</div>

Ackroydd · Accepted Answer · 2020-11-14 00:05:30Z

Perhaps the easiest way to modify class names in the template is to use a method.

The method className() translates the data with invalid CSS characters into something which can be used on the style sheet.

<p v-for=" x in languages" v-on:click="call(x)" 
  :id="'obj-' + x" 
  :class="'lang-' + className(x)"
  style="border:1px solid black; padding: 10px;">

methods: {
  call: function (x) {
    alert("Hello " + x);
  },
  className: function (item) {
    return item === 'c++' ? 'cpp' : item;
  }
},

Demo

<!DOCTYPE html>
<html lang="en" dir="ltr">
    
<head>
    
  <title></title>
    
  <!-- BootStrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    
    
  <!-- JQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
  <!-- development version, includes helpful console warnings -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
  <style>
    .lang-cpp { color: red }
  </style>
    
  <body>
    
    <div id="app">
      {{ message }}
    
      <p v-for=" x in languages" v-on:click="call(x)" :id="'obj-' + x" 
        :class="'lang-' + className(x)"
        style="border:1px solid black; padding: 10px;">
        {{x}}
      </p>
    
      </div>
    
      <script>
        var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
          languages: ["Python", "c++"]
        },
        methods: {
          call: function (x) {
            alert("Hello " + x);
          },
          className: function (item) {
            return item === 'c++' ? 'cpp' : item;
          }
        },
      })
    </script>
  </body>
    
</html>

Collectives™ on Stack Overflow

Vue Js Adding Dynamic Class name

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related