HTML

Question

我有一个纽芬兰语,在点击时打开了一种模式,在模式中显示的内容是以传送到纽伦的数据为根据的。

My button,

<button class="btn btn-info" data-toggle="modal"
  data-target="#someModal" :data-id=item.id :data-name=item.name>
  Edit
</button>

在我的模式中,我有一些纽芬兰语,在被点击时,我应该用一个参数,即数据输入。

我的表,,

<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,我从上述纽特获得。

Code for Modal

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

Here is the demo https://codepen.io/maab16/pen/jONZpVG

Answer 2

我建议在构成部分职能范围内使用<代码>console.log(this),然后在纽扣地点上要求这一功能,以便你能够检查该构成部分的所有特性。

(See the attached image, below, for example output of the above console.log statement.)

这表明,除其他外,你可以查阅<代码>$el持有OM元件的财产。打开了各种各样的可能性,例如能够在<<>上填满的<><>代码/>生命周期内添加以下代码:

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

And for this example, this.myAttribute would have been defined in (for example) your data property:

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

在构成部分内执行<代码>console.log(this)时的例量:

Answer 3

你也可以通过“项目.id”这样的“项目:

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

Answer 4

简单选择对删除纽扣吨和删除纽扣吨具有约束力。

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

HTML

Vue

Here is the demo https://codepen.io/maab16/pen/jONZpVG

友情链接