CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
Soumil Nitin Shah
Soumil Nitin Shah

Reputation: 730

Vue Js Adding Dynamic Class name

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>

Upvotes: 7

Views: 9603

Answers (4)

Ackroydd
Ackroydd

Reputation: 1610

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>

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 2

Nicensin
Nicensin

Reputation: 953

: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}`"

Upvotes: 10

Amaarockz
Amaarockz

Reputation: 4674

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>

Upvotes: 4

Related Questions