Framework7 Vue - Capture List item in click event

Questions
1

I am using framework7-vue. If I have a list item link like such:

    <f7-list-item link="#Link-10112358" title="Show Current"></f7-list-item>

And I assign a function to a click event, is there a way built in to capture the original <f7-list-item> element? I ultimately want to pull out the value of the link attribute so I can process based on it. I realize that Vue re-renders the original item to something different, so I understand that I may not be able to get the original <f7-list-item> element, but really what I am after is obtaining the value of an attribute on the element itself.

If I just use a Vue @click event, like this:

    <f7-list-item link="#Link-10112358" title="Show Current" @click="someFunction"></f7-list-item>

Then in my someFunction(e), the parameter is a MouseEvent whose target is the <div> that contains the title, “Show Current” in this case.

If I change my function invocation in the @click attribute to

    <f7-list-item link="#Link-10112358" title="Show Current" @click="someFunction(this)"></f7-list-item>

Then when I enter someFunction(obj), the value of obj is just the browser’s window object, not the item that I clicked.

Is there another way to structure this so I am not relying on hackish ways to get this link value? Even if I were to set link="#" and use a totally different attribute like data-link-target="10112358"? I am open to suggestions.

2

So I figured out an answer that is perfectly suitable toward my needs.

In my case, I don’t actually care about accessing the actual list item in the MouseEvent. I don’t care about accessing any attributes of it either. All I really care about is accessing some data linked to the list item. If that’s the case, then I can just put that data as a parameter right in the method invocation:

    <f7-list-item link="#Link-10112358" title="Show Current" @click="someFunction('10112358')"></f7-list-item>

Furthermore, if I want to bind the passed parameter to some value that is part of my bound data model, then I can refer to it as a parameter:

    <f7-list-item link="#Link-10112358" title="Show Current" @click="someFunction(model.value)"></f7-list-item>

Now, what I did not figure out is how to get a specific element within the rendered element hierarchy, in case I wanted to do some DOM manipulation on it as a result of a click. However, that is not a concern of mine at this time (though I still wouldn’t know how to do that).

3

Most preferably you have your itemList in your viewmodel (in the data() section of the .vue component). In this case you can iterate over the items via v-for like this:

  <f7-list>
    <f7-list-item v-for="item in itemList" :key="item.id" @click="onItemClicked(item)">
    ...
    </f7-list-item>
  </f7-list>

Then you’ll get the clicked item (as a JS object) in your onItemClicked eventhandler.
On the other hand, if you set up your bindings carefully, then normally won’t need any manual DOM manipulation (at least not with Dom7), as vue will update it for you as your viewmodel values change.

1 Like