Creé una tabla y en la tabla estoy recorriendo una serie de objetos.
<table class="table table-striped" v-if="bins.length > 0"> <thead> <tr> <th scope="col">#</th> <th scope="col">Location</th> <th scope="col" class="text-end">Action</th> </tr> </thead> <tbody> <tr v-for="(bin, index) in bins" :key="index"> <th scope="row">{{index + 1}}</th> <td ref="txtLocaton" contenteditable="false" v-text="bin.binlocation"></td> <td class="text-end"> <div class="action-btn"> <button @click="btnEdit"><fa icon="edit" /> Edit</button> <button><fa icon="trash" /> Delete</button> </div> </td> </tr> </tbody> </table> Lo que me gustaría es que al hacer clic en el botón Edit , quiero cambiar el atributo contenteditable de falso a verdadero.
Este es el código para los datos ()
<script> export default { data(){ return{ bins:[ { binlocation: '11 Garden Block, New City', }, { binlocation: 'Ali Towers, Lahore' }, { binlocation: 'The Mall Road' } ] } }, methods:{ btnEdit(){ console.log(this.$refs.txtLocaton) } } } </script> Estoy pensando en cambiar el atributo usando ref pero cuando lo consuelo, está devolviendo la última matriz al hacer clic en el botón
Puede almacenar claves contenteditable en una matriz de bins (¿ false inicialmente?):
[{ binlocation: '11 Garden Block, New City', contenteditable: false, }, { binlocation: 'Ali Towers, Lahore', contenteditable: false, }, ...] Luego vincule el atributo td contenteditable a esos valores (en lugar de pasar false directamente):
<td ref="txtLocaton" :contenteditable="bin.contenteditable" v-text="bin.binlocation"></td>Y simplemente cambie los valores como desee cuando presione el botón 'editar':
<button @click="bin.contenteditable = !bin.contenteditable"><fa icon="edit" /> Edit</button>o
<button @click="btnEdit(index)"><fa icon="edit" /> Edit</button> btnEdit(index) { this.bins[index] = !this.bins[index]; }Intente como el siguiente fragmento (puede pasar el índice a su método y vincular el atributo contenteditable a la propiedad de datos):
new Vue({ el: '#demo', data(){ return{ bins:[ {binlocation: '11 Garden Block, New City',}, {binlocation: 'Ali Towers, Lahore'}, {binlocation: 'The Mall Road'} ], editable: null } }, methods:{ btnEdit(index){ this.editable = index } } }) Vue.config.productionTip = false Vue.config.devtools = false .editable { border: 2px solid violet; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table class="table table-striped" v-if="bins.length > 0"> <thead> <tr> <th scope="col">#</th> <th scope="col">Location</th> <th scope="col" class="text-end">Action</th> </tr> </thead> <tbody> <tr v-for="(bin, index) in bins" :key="index"> <th scope="row">{{index + 1}}</th> <td ref="txtLocaton" :contenteditable="index === editable" :class="index === editable && 'editable'" v-text="bin.binlocation"></td> <td class="text-end"> <div class="action-btn"> <button @click="btnEdit(index)"> Edit</button> <button> Delete</button> </div> </td> </tr> </tbody> </table> </div>