Here is the code:

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

The rendered HTML looks like this:

<tr >
  <td>1</td>
  <td>Job</td>
</tr>
<tr >
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr >
  <td>3</td>
  <td>Wazert</td>
</tr>

The just don't change. What I expect is:

<tr >
  <td>1</td>
  <td>Job</td>
</tr>
<tr >
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr >
  <td>3</td>
  <td>Wazert</td>
</tr>

How should I fix it?

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>