-1

Estoy intentando crear componentes de la librería v-movable en vuejs al pulsar en un boton pero me da estos errores "TypeError: Cannot set property 'touchAction' of undefined" y "[Vue warn]: Error in directive movable update hook: "TypeError: Cannot set property 'touchAction' of undefined"

La pagina donde saqué la librería es : https://www.npmjs.com/package/v-movable

si no pongo el v-for si funciona pero entonces no es dinámico y necesito que se creen dinámicamente cada vez que se pulsa un botón introducir la descripción de la imagen aquí

Estoy buscando en todos lados pero no encuentro el problema. el código es:

<template>
    <div class="row" style="margin-left:0px">
        <v-btn
         v-on:click="addItem()" class="btn-icon btn-icon-only btn btn-light btn-sm list-group-item col-2" style="margin-left:0px"
        v-for="element in list1"
        :key="element.name"
        
        >
        {{ element.name }}
        
        </v-btn>

        <div style="position:relative;" v-for="(element, idx)  in key"
        :key="idx" >
         <div class="testmove" ref="element.name">
           <movable class="modaltitle" target="element.name">fghdfgh</movable>
           <span style="color:black;display:block">dfghdfghdfghdfgh</span>
         </div>
       </div>

      <!-- <div style="position:relative;" >
         <div class="testmove" ref="element.name2" v-for="(element, idx)  in key"
        :key="idx">
           <movable class="modaltitle" target="element.name2">eyyyyy</movable>
           <span style="color:black;display:block">etttttttttttttttt2</span>
         </div>
       </div> -->
    </div>
</template>
<script>
    import gestionService from "../../services/modules/gestion/modules.gestion.service"
    export default {
        components: {
        
            
        },
        directives: {


        },
        data: () => ({
           list1:[],

           jsonTemplate:{
                campaignName: '',
                templateName: '',
                campos: [],
                tipo:'MenuGestion'
            },

            key:0

        }),

        mounted(){

            window.addEventListener('accountInfo-localstorage-changed', (event) => {
                this.jsonTemplate.campaignName=JSON.parse(event.detail.storage).name                
            });
            

        },

        created () {
            this.jsonTemplate.campaignName=JSON.parse(sessionStorage.getItem('accountInfo')).name
            this.cargarCampos(JSON.parse(sessionStorage.getItem('accountInfo')).name)
        },

        methods: {
            cargarCampos(campaignName){
                gestionService.getFields(campaignName)
                .then((response) => {
                    response.data[0].forEach(element => {
                        this.list1.push({name: element.name})
                    });
                    console.log(this.list1)
                })
                .catch((response) => {
                    console.log(response)
                })
            },

            addItem(){
                this.key++
                console.log(this.key)

            }

        }
    }


</script>
    <style>
      .testmove {
        display:block;
        position: absolute;
        top: 0;
        height: 50px;
        width: 200px;
        margin: 30px;
        background: #D5DDE0;
        color: white;
      }
      .modaltitle {
        background: #42C5F0;
        display:block;
        width:100%;
        color: white;
      }
    </style>  

Agradeceria mucho la ayuda dado que me es imposible avanzar.

Un saludo.

1 respuesta 1

2

Me parece que es por que los atributos ref y target los asignas te sin hacer v-bind (o poniendo : al inicio), estas asignando literalmente el string "element.name" en vez de el valor de la variable, por eso solo te funciona sin el v-for.

2
  • Hola @EderDíaz lo primero de todo muchas gracias por la respuesta. Me sigue sin funcionar lo mencionado, probé a poner el ":" y nada, sigue saliendo los mismos errores. No se si podeis explicarme que es la propiedad touchAction en esta libreria porque no sabria decir que es ni como hacer que no sea nulo el 15 jul. 2021 a las 10:15
  • Edito: al final se arreglo el problema poniendo ésta linea de codigo v-bind:class="{ touchAction:true }" el 16 jul. 2021 a las 10:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.