Css Selector in Framework7 vue

Question

i try to build an Cordova/Phonegap application using vue.js and the Framework7. I find out how to use functions like "onClick" using the "v-on:click="OnClick" attribute in an html element. Framework7 has jquery already implemented in the dom.

But there is one question. How can i access the dom directly, so that i can select whole css classes with the jquery selector. Like: $('.likeButton') . ?

In the offical framework7 i found something like this to access the dom with its functions:

this.$$ or this.Dom7

This is what i have already written down in the home.vue file:

    <script>


  //import Fonts-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");

        //this is what i have tested, looking if i have access to dom
        let $$ = this.$$;
        console.log($$);
      },
      //this is what i want to use
      $('.likebutton').on('click',function () {

  })
  }


  }


</script>

Did any of you have an idea how this works? I hope you can help me. I'm new with vue.js in combination with the framework7.

Thank's for your help :)

Answer 1

We can use all the DOM functions just like

this.$$('.classname)

for example, if you want to hide something by jquery you can use as:

this.$$('.classname).hide()

To check all the DOM functions you can check the official documentation. https://framework7.io/docs/dom7.html

But make sure that your DOM function should not in any Window function. If you get the error to implemented it, just make the 'this' instance first.

Just like: var self=this; // a global variable with this instance use

self.$$('.classname).hide()

for any framework7 help, just ping me on skyp: sagardhiman5_1

Answer 2

Have you tried using Vue's $refs ? You can set a reference to a specific DOM element and then access that in Vue.

A simple example:

<template>
  <div class="some-item" ref="itemRef">Some item</div>
</template>

Then in the component:

var myItem = this.$refs.myItem;
// do what you want with that DOM item...

You can also access $refs from the parent. The example in the link below gives details on that.

More on $refs: https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs