如何在 vuejs 中获取 data-\* 属性的值

新手上路,请多包涵

我有一个按钮,单击它会打开一个模式,模式中显示的内容基于传递给按钮的数据属性。

我的按钮,

 <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">&times;</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 许可协议

阅读 737
1 个回答

我建议在组件函数中执行 console.log(this) ,然后在单击按钮时调用该函数,以便检查组件的所有属性。

(参见下面的附图,例如上述 console.log 语句的输出。)

这向您表明,除其他外,您可以访问 $el 保存 DOM 元素的属性。这开辟了很多可能性,例如能够将以下代码添加到组件的 mounted 生命周期钩子中:

 mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

对于此示例, this.myAttribute 将在(例如)您的 data 属性中定义:

 // This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

Vue.js (v2) 生命周期钩子文档


在组件内执行 console.log(this) 时的示例输出:

在此处输入图像描述

原文由 LittleTiger 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题