I am currently working on developing a Cordova/Phonegap application using vue.js and the Framework7. I have been able to utilize functions like "onClick" by using the "v-on:click="OnClick" attribute within an HTML element. It's worth noting that Framework7 already has jQuery implemented in the DOM.
However, I have a question regarding how to directly access the DOM so that I can select entire CSS classes using jQuery selectors. For example: $('.likeButton'). Is there a way to achieve this?
In the official Framework7 documentation, I came across methods for accessing the DOM with functions such as:
this.$$ or this.Dom7
Below is a snippet of what I have written in the home.vue file:
<script>
//importing Font-awesome Icons
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import {} from '@fortawesome/fontawesome-free-solid'
import F7Icon from "framework7-vue/src/components/icon";
import F7PageContent from "framework7-vue/src/components/page-content";
import * as Framework7 from "framework7";
export default {
name: 'FAExample',
components: {
F7PageContent,
F7Icon,
FontAwesomeIcon
},
methods: {
clickit: function () {
console.log("hi");
//testing if I have access to the DOM
let $$ = this.$$;
console.log($$);
}
}
}
</script>
Does anyone have insight into how this can be achieved? Any help would be greatly appreciated as I am new to using vue.js alongside Framework7.
Thank you for your assistance :)