我有一个按钮,单击它会打开一个模式,模式中显示的内容基于传递给按钮的数据属性。
我的按钮,
<button class="btn btn-info" data-toggle="modal"
data-target="#someModal" :data-id=item.id :data-name=item.name>
Edit
</button>
在我的模式中,我有一些按钮,单击时我应该调用一个带有参数的 vuejs 函数,该参数是数据属性。
我的模态按钮,
<div class="modal-footer">
<button type="button" class="btn btn-danger"
@click.prevent="deleteItem()" data-dismiss="modal">
Delete
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
在这里,我必须将一个参数传递给 deleteItem()
,该参数是 data-id
我从上面的按钮中获得的。
模态代码
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<div class="deleteContent">
Are you Sure you want to delete ?
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn btn-danger"
@click.prevent="deleteItem()"
data-dismiss="modal">
Delete <span id="footer_action_button"
class='glyphicon glyphicon-trash'> </span>
</button>
<button type="button" class="btn btn-warning"
data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
原文由 Mann 发布,翻译遵循 CC BY-SA 4.0 许可协议
我建议在组件函数中执行
console.log(this)
,然后在单击按钮时调用该函数,以便检查组件的所有属性。(参见下面的附图,例如上述
console.log
语句的输出。)这向您表明,除其他外,您可以访问
$el
保存 DOM 元素的属性。这开辟了很多可能性,例如能够将以下代码添加到组件的mounted
生命周期钩子中:对于此示例, this.myAttribute 将在(例如)您的 data 属性中定义:
Vue.js (v2) 生命周期钩子文档
在组件内执行
console.log(this)
时的示例输出: