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

Posted 2023-02-22

【中文标题】如何在 vuejs 中获取 data-* 属性的值

【英文标题】：How to get the values of data-* attributes in vuejs

【发布时间】：2017-07-05 06:53:54

【问题描述】：

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

我的按钮，

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

【问题讨论】：

您可以发布您正在使用的模式的代码吗？

贴出模态的代码，我需要在模态页脚按钮中向函数传递一个参数。

当你将 props 作为组件的 kebab 大小写传递时，Vue js 会将它们更改为驼峰大小写，因此 data-id 在组件中可以作为 this.dataId 使用

【参考方案1】：

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

（参见下面的附图，例如上述console.log 语句的输出。）

这表明您可以访问包含 DOM 元素的 $el 属性。这开辟了很多可能性，例如能够将以下代码添加到组件的 mounted 生命周期钩子中：

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

对于本示例，this.myAttribute 将在（例如）您的数据属性中定义：

// 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) Lifecycle hooks documentation

---

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

【讨论】：

可以在beforeMount钩子中使用this.$el.getAttribute('data-*')函数。在这种情况下，您可以为属性指定null，而不是data 函数中的默认值。

对于任何 1.x 用户，compiled 看起来像是最早的生命周期钩子，其中填充了this.$el，因此您可以像这样使用它。

【参考方案2】：

你也可以像这样传递“item.id”：

<button type="button" @click="deleteItem(item.id)">Delete</button>

【参考方案3】：

html

<button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>

Vue

methods:
  deleteItem: function()
    var id = event.target.getAttribute('data-id');
    console.log(id) // 1
  

这里是演示https://codepen.io/maab16/pen/jONZpVG

【参考方案4】：

一个简单的选项也将 id 绑定到删除按钮

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)"  :data-id=item.id data-dismiss="modal">
        Delete
    </button>

【讨论】：

添加时出现以下错误[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

确保范围也扩展了按钮

是的，按钮在范围内。

你能创建一个 jsfiddle 吗？