v-touch-swipe error



  • 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.



  • You basically answered the question yourself., yes you have to import the directive. :D



  • This post is deleted!


  • Found the answer, I just have to:

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

    and now I can use

    <div v-touch-swipe="method"></div>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.