In vuejs, quoting variables in HTML element attribute doesn't work

Question

Here is the code:

<tr v-for="(item, index) in detail" :key="item.name" class="[[ item.name ]]">
  <td>[[ index + 1 ]]</td>
  <td>[[ item.name ]]</td>

The rendered HTML looks like this:

<tr class="[[ item.name ]]">
  <td>1</td>
  <td>Job</td>
</tr>
<tr class="[[ item.name ]]">
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr class="[[ item.name ]]">
  <td>3</td>
  <td>Wazert</td>
</tr>

The class="[[ item.name ]]" just don't change. What I expect is:

<tr class="Job">
  <td>1</td>
  <td>Job</td>
</tr>
<tr class="Jesse">
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr class="Wazert">
  <td>3</td>
  <td>Wazert</td>
</tr>

How should I fix it?

Where did you read about using square brackets? The documentation is pretty clear and also covers how to bind data to attributes. — gre_gor
– gre_gor, Commented Nov 20, 2021 at 10:29

Kiran Mistry · Accepted Answer · 2021-11-20 10:23:39Z

2

First thing Square bracket not worked in vue.js you need to use interpolation for binding the data dynamically.

So you need to use like For Example

HTML

<table border="1">
   <tr v-for="(item, index) in detail" :key="item.name" :class="item.name">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
   </tr>
</table>

JS

data: function () {
  return {
    detail: [{ name: "Job" }, { name: "Jesse" }, { name: "Wazert" }],
  };
},

Here you can play with code

answered Nov 20, 2021 at 10:23

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

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

3 Comments

AGamePlayer Over a year ago

thanks a lot for the codesandbox link. So if I want to change :class to :data-custom, that works too? Sorry I can't find a place to rerun the modified code on codesandbox.

Kiran Mistry Over a year ago

no use only :class because this is built in class for binding dynamic class after modified in codesandbox press CTRL + S and check if not work then create one and paste my code there and check

AGamePlayer Over a year ago

thanks for the feedback, so what about data-custom? how could I do that if I don't want to use class?

Majed Badawi · Accepted Answer · 2021-11-20 10:08:32Z

1

You need to use class-binding and interpolate the data:

new Vue({
  el: "#app",
  data: () => ({ 
    detail: [ { name: "Job" }, { name: "Jesse" }, { name: "Wazert" } ] 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tr v-for="(item, index) in detail" :key="item.name" :class="item.name">
      <td>{{index + 1}}</td>
      <td>{{item.name}}</td>
    </tr>
  </table>
</div>

answered Nov 20, 2021 at 10:08

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

In vuejs, quoting variables in HTML element attribute doesn't work

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related