vue.js - 是否可以捕获我在 vuejs 中单击的元素属性？

Question

在vue.js中，我想在点击元素时使用元素的属性。

在 Home.vue 中

<template>
   <div role_id='1' @click="role_clicked">role 1</div>
   <div role_id='2' @click="role_clicked">role 2</div>
   <div role_id='2' @click="role_clicked">role 2</div>

   <div v-html="role_detail_box">
       axios loaded content area
   </div>
</template>
<script>
    ...
    methods: {
       role_clicked: function(){
           let uri = ~~~
           let params = { role_id : ** clicked role_id!! ** }
           axios.post(uri, params).then((response) => {
               this.role_detail_box = response.data
           })
       }
    }
</script>

如果使用 jquery，我可能会使用 $(this).attr("role_id")

点击元素时如何传递html元素？

我真的没有处理vuejs中的每个元素吗？

Answer 1

试试这个:

<script>
    ...
    methods: {
       role_clicked: function(event){   <~~ added code here
           const role_id = event.target.getAttribute('role-id')  <~~ added code here
           let uri = ~~~
           let params = { role_id : ** clicked role_id!! ** }
           axios.post(uri, params).then((response) => {
               this.role_detail_box = response.data
           })
       }
    } 
</script>

VueJS 中的事件处理程序会自动接收一个 event 对象，该对象包含触发事件的目标元素的所有信息。然后我们将使用该 event 对象访问 role_id 属性。

这一行是您需要的:event.target.getAttribute('role-id')。

不要忘记将 event 对象作为函数的输入:

role_clicked: function(event){ 

这是演示:https://codesandbox.io/s/l4517y690q