No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    v-touch-swipe error

    Help
    directive swipe touch
    2
    4
    2647
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      boriscy last edited by boriscy

      I have the error

      [Vue warn]: Failed to resolve directive: touch-swipe

      My component code is

      Check the line <div v-if="show" class="search-pane fixed on-top full-width" v-touch-swipe.vertical="swipe">

      <script>
      /* eslint-disable */
      import types from '../store/mutation-types'
      import { Dialog, QTransition } from 'quasar'
      import {format} from '../mixins'
      import Tag from './common/Tag.vue'
      import StarmeterInput from './common/StarmeterInput.vue'
      import BaseMenu from './common/BaseMenu.vue'
      
      export default {
        mixins: [format],
        components: {
          Tag,
          StarmeterInput,
          BaseMenu,
          QTransition
        },
        data() {
          return {
            backUrl: '',
            dialogReset: null,
            dialogCreate: null,
            suggestions: ['uno', 'dos'],
            stars: null,
            form: {
              radius: 2
            },
            show: false,
            cssClass: ''
          }
        },
        computed: {
          query() { return this.$store.state.search.query }
        },
        ////////////////////////////////////////
        watch: {
          'form.radius': function(a, b) {
            if(a > 20) {
              this.form.radius = 20
            }
          }
        },
        ////////////////////////////////////////
        methods: {
          toggle() {
            this.show = !this.show
          },
          swipe(obj) {
            console.log('sw', obj);
          },
          search() {
            const pos = this.$store.state.globals.position.coords
      
            this.$store.dispatch('startSearch', {
              radius: this.form.radius,
              coordinates: [pos.longitude, pos.latitude],
              rating: this.$refs.stars.getStars()
            })
            this.$router.push('/private/list')
          }
        },
        created() {
          this.form.radius = this.query.radius
        }
      }
      
      </script>
      
      <template>
        <div>
        <q-transition enter="slideInDown" leave="slideOutUp">
          <div v-if="show" class="search-pane fixed on-top full-width" v-touch-swipe.vertical="swipe">
            <div class="layout-padding full-width">
              <div class="flex">
                <div>
                  <label class="text-white">{{'Distance' | translate}}</label>
                  <input type="text" v-model="form.radius" class="input-form text-center" size="4"/>
                  Km.
                </div>
                <div class="pl-05">
                  <input type="range" min="1" max="20" v-model="form.radius" class="full-width"/>
                </div>
              </div>
      
              <div>
                <label class="text-white">{{'Qualification' | translate}}</label>
                <StarmeterInput class="inline-block" :stars="query.rating" ref="stars" />
              </div>
      
              <div>
                <label class="text-white">{{'Tags' | translate}}</label>
                <Tag :suggestions="['vegano', 'carne']"/>
              </div>
      
              <br/>
              <q-btn color="primary" class="full-width" @click="search()">{{'Search' | translate}}</q-btn>
            </div>
      
          </div>
        </q-transition>
      
          <q-transition enter="fadeIn" leave="fadeOut">
            <div class="layout-backdrop fullscreen" v-if="show" @click="show=false" style="z-index:1"></div>
          </q-transition>
        </div>
      </template>
      
      <style lang="styl">
      .title {}
      .s-cart .title {
        margin-bottom: 0.6rem;
      }
      .search-pane {
        background: rgba(0,0,0,0.7);
        z-index: 2;
      }
      </style>
      

      As you can see I have created a swipe method but I got the error, should I import the directives and add it on main.js?, thanks.

      1 Reply Last reply Reply Quote 1
      • a47ae
        a47ae last edited by

        You basically answered the question yourself., yes you have to import the directive. 😃

        B 1 Reply Last reply Reply Quote 0
        • B
          boriscy @a47ae last edited by

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • B
            boriscy last edited by boriscy

            Found the answer, I just have to:

            import { TouchSwipe } from 'quasar'
            ...
            directives: {
              TouchSwipe
            }
            ...
            

            and now I can use

            <div v-touch-swipe="method"></div>
            
            1 Reply Last reply Reply Quote 2
            • First post
              Last post