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

Question

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

我的按钮，

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

Answer 1

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

Answer 2

我建议在组件函数内执行

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) 生命周期钩子文档

---

在组件内执行

console.log(this)

时的示例输出：

Answer 3

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

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

Answer 4

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

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