..."> ..."/> ..."> ...">

v-on:click上的vue.js参考div ID

onclick Vue.js

TonyStafan

2020-03-12

使用v-on:click我想在Vue.JS中使用div的ID设置变量-如何引用呢?

<div id="foo" v-on:click="select">...</div>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            select: function(){
                divID = this.id // ??
                alert(divID)
            }
        }
    })
</script>

第1271篇《v-on:click上的vue.js参考div ID》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Pro神无樱 2020.03.12

受@nirazul的答案启发,检索数据属性

HTML:

<ul>
    <li
            v-for="style in styles"
            :key="style.id"
            @click="doFilter"
            data-filter-section="data_1"
            :data-filter-size="style.size"
    >
        {{style.name}}
    </li>
</ul>

JS:

export default {
    methods: {
        doFilter(e) {
            let curTarget = e.currentTarget;
            let curTargetData = curTarget.dataset;
            if (curTargetData) {
                console.log("Section: " + curTargetData.filterSection);
                console.log("Size: " + curTargetData.filterSize);
            }
        }
    }
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android