Aquí está el código:
<tr v-for="(item, index) in detail" :key="item.name" class="[[ item.name ]]"> <td>[[ index + 1 ]]</td> <td>[[ item.name ]]</td>El HTML renderizado se ve así:
<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> La class="[[ item.name ]]" simplemente no cambia. Lo que espero es:
<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>¿Cómo debo arreglarlo?
Primero , el corchete cuadrado no funcionó en vue.js, debe usar la interpolation para vincular los datos dinámicamente.
Entonces necesitas usar como Por ejemplo
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" }], }; },Aquí puedes jugar con el código.
Debe usar class-binding e interpolate los datos:
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>