Open full view…

Add @click handlers to f7 elements in Vue?

Wed, 26 Apr 2017 09:43:50 GMT

I'm trying to add handlers for clicks onto f7-card elements. For some reason, @-click doesn't work as it usually does for custom components. If I wrap it in a div I can get it to work, but this seems to defeat the purpose. I'd like to create cards using v-for=(val, key) in data, and val won't be available to an outside div. Why isn't this basic functionality supported?

Wed, 26 Apr 2017 13:31:27 GMT

Hi, can you share a snippet of your code because I don't understand the problem? Is it a f7-card specific problem ? I use also v-for to build a dynamic list of inputs and pass the required data per item as arguments to the function called by @click to update a global state with vuex.

Thu, 27 Apr 2017 06:08:50 GMT

If you use cards in the following example instead of list items, @click doesn't do anything: <f7-list accordion> <f7-list-item v-for="(catval, catkey) in treeData" :title="catkey" v-show="selectedCategory==''" @click="doSomething"> <f7-accordion-content> <f7-list-item v-for="(subval, subkey) in catval" :title="subkey" v-show="selectedCategory!=''"> <div> </div> </f7-list-item> </f7-accordion-content> </f7-list-item> </f7-list>

Thu, 27 Apr 2017 06:44:58 GMT

move @click=“doSomething” to <f7-accordion-content>?

Thu, 27 Apr 2017 06:59:13 GMT

I'm saying that I don't want to use an accordion. I'd like to have cards generated with a for loop, and be able to click on the card to call a function. <f7-card v-for="(val, key) in treeData" @click="doSomethingWith(key)"></f7-card>

Thu, 27 Apr 2017 07:19:41 GMT

Ok, apply @click event to f7-card-content (header, footer)

Thu, 27 Apr 2017 11:20:27 GMT

That's a little less than ideal for me, since I'd like to be able to make a card without a header/footer and have it functional, but thanks for the info.

Thu, 04 May 2017 12:41:11 GMT

@NikolayKuznetsov I am now trying to add a click handler to a card that includes a f7-card-content. Apparently, contrary to what you said, @click doesn't work in card-content either: `<f7-card-content @click="$f7.views.main.router.load({url: '/goals/'})"><icon name="bullseye" scale="7"></icon></f7-card-content>` (Although the above works on a list-item). Am I missing something?

Mon, 15 May 2017 23:17:59 GMT

@davidjoseph I had the same issue, but with `f7-list-item`. However, `onclick` worked. I had to get around this by defining `var vm = null;` as a global and use `vm = new Vue(...)`, then call a vanilla JS function outside of `vm` which then called `vm.myMethod(val)` ... Far less than ideal obviously... But as for your last comment, cant you specify a `link="$router.load({url: '/goals/'})"` attribute on a card? That worked for me on a separate issue I had on a component rendered page.

Tue, 01 Aug 2017 21:39:48 GMT

Same problem here... Found a dirty fix, added a <span @click="myFunction()">...</span> around the card item... working :).