Question

我正在使用Bootstrap-Vue来显示表格，并且已经使用vue-slot在带有更新按钮的额外列中添加了内容。我的显示效果很好，单击按钮时有一个方法被调用。在这种方法中，我可以访问该项目上的所有信息，但是似乎找不到找到该按钮的方法。我想禁用它并更改它的内容。如何访问按钮元素？我创建了一个codepen example here，其中显示了我已设置并需要执行的操作。

HTML

<select>
    <option selected="true" disabled="disabled">Filter by country</option>
    <option value="German">German</option>
    <option value="English Swedish French">English Swedish French</option>
</select>

JavaScript

<div id='app'>
    <div>{{ this.output }}</div>
    <b-table hover head-variant="dark"
             id="pages-table"
             :items="items"
             :fields="fields">
        <template slot="actions" slot-scope="data">
            <button class="btn btn-dark" @click="update(data)">Update</button>
        </template>
    </b-table>
</div>

Answer 1

您可以在按钮上添加动态参考

 <button class="btn btn-dark" @click="update(data)" :ref="'btn' + data.index">Update</button>

然后通过该引用访问按钮

  this.$refs["btn" + data.index].disabled = true

这是带有示例的codepen

https://codepen.io/vlaem/pen/gNjGQE

除了索引之外，您还可以使用数据的id属性来创建引用（data.item.id）

尽管从个人角度来看这并不对劲，但我认为如果我们可以跟踪相同或不同阵列上所有按钮的状态会更好，例如下面的示例

https://codepen.io/vlaem/pen/GbBMLe

如何更新bootstrap-vue中单击的按钮

HTML

JavaScript

1 个答案: