如何在Vue中單擊按鈕時從數組中獲取對象

Question

我創建了一個表，並在表中循環遍歷對象數組。

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

我想要的是在“編輯”按鈕上單擊，我想將 contenteditable 屬性從 false 更改為 true。

這是 data() 的代碼

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

我正在考慮使用“ref”更改屬性，但是當我對其進行控制台時，它會在單擊按鈕時返回最后一個數組

Answer 1

您可以將contenteditable鍵存儲在bins數組中（最初為false ？）：

[{
  binlocation: '11 Garden Block, New City',
  contenteditable: false,
}, {
  binlocation: 'Ali Towers, Lahore',
  contenteditable: false,
}, ...]

然后將contenteditable td屬性綁定到這些值（而不是直接傳遞false ）：

<td ref="txtLocaton" :contenteditable="bin.contenteditable" v-text="bin.binlocation"></td>

當按下“編輯”按鈕時，只需根據需要切換值：

<button @click="bin.contenteditable = !bin.contenteditable"><fa icon="edit" /> Edit</button>

或者

<button @click="btnEdit(index)"><fa icon="edit" /> Edit</button>

btnEdit(index) {
  this.bins[index] = !this.bins[index]; 
}

Answer 2

嘗試如下代碼段（您可以將索引傳遞給您的方法並將 contenteditable 屬性綁定到數據屬性）：

 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>