web-dev-qa-db-fra.com

VueJS accédant à la méthode importée de l'extérieur dans le composant vue

J'ai un fichier de script externe Java Script something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

et voici mon composant vue Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

J'ai deux questions.

  1. Tout d'abord, comment appeler cette méthode à l'intérieur du hook de cycle de vie créé pour s'exécuter automatiquement.
  2. Deuxièmement, comment appeler cette méthode en appuyant sur le bouton "Appeler un JS externe"

Je sais que changer le contenu d'un div peut facilement être fait par vueJS sans l'aide de fichiers externes JS purs. Mais je pose cette question pour clarifier les concepts sur la façon d'utiliser les fichiers JS externes dans le composant vue.

Je vous remercie.

javascriptvue.jsvuejs2exportvue-component
6
Pathum Kalhan

  1. Vous pouvez appeler directement la fonction something importée sous n'importe quelle méthode de cycle de vie de votre choix. Ici, cependant, je recommanderais d'utiliser la méthode mounted, car c'est celle qui se déclenche une fois que tout le code HTML du composant est restitué.

  2. Il y a plusieurs manières de faire ça. Une façon serait d'ajouter la fonction something sous le composant vue du composant data, puis d'appeler la fonction directement à partir du modèle.

    Personnellement, je ferais une méthode sur le composant Vue qui appelle la fonction, puis demander à votre modèle @click d'appeler cette méthode. De cette façon, vous pouvez effectuer d'autres actions ou appeler d'autres fonctions à l'avenir si vous le souhaitez. Cela me semble aussi un peu plus propre.

Dans cet esprit, vous vous retrouveriez avec ceci:

<template>
  <div>
    <button type="button" name="button" @click="callSomething">Call External JS</button>
    <div id="demo"></div>
  </div>
</template>

<script>
import something from "./something.js"

export default {
  mounted() {
    something()
  },
  methods: {
    callSomething() {
      something()
    }
  }
}
</script>
1
kingdaro

Une meilleure solution serait d'utiliser des mixins:

import something from './something.js'
export default {
  mixins: [something]
}

vous pouvez maintenant utiliser les méthodes/calculs que vous avez exportés dans something.js, directement sur this.

Donc, dans votre exemple, vous avez myFun() exporté depuis something.js, Et nous pouvons l'appeler depuis Dashboard.vue Comme ceci:

<template>
    <div>
        <button type="button" name="button" @click="myFun">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
    import something from "./something.js"
    export default {
        mixins: [something],
        mounted(){
            this.myFun()
        }
    }
</script>

J'espère avoir bien compris la syntaxe, mais c'est généralement l'idée des mixins.

9
Narxx

Une autre approche serait d'ajouter la méthode dans le bloc de données:

import something from "./something.js" // assuming something is a function

data() {
  return {
    // some data...
    something,
  }
}

Ensuite, dans votre modèle, utilisez-le comme:

<template>
    <div class="btn btn-primary" @click="something">Do something</div>
</template>
2
Kodiak

Avec votre exemple, fichier javascript externe something.js

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

Vous pouvez l'analyser comme un objet dans vos méthodes: {} dans Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>
1
Larry Mckuydee

Les méthodes qui sont réactives ou couplées aux composants (qui ne sont pas des API) doivent être écrites en methods. Je suis cette pratique. J'ai un scénario ici pour clarifier vos concepts:

Fichier JS (un avec fonction contenant) nom de fichier - apis.js

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

J'ai utilisé cette fonction ici dans le crochet created. La chose est que vous pouvez l'utiliser comme l'une des méthodes définies par l'utilisateur.

Fichier Vue (celui que nous utiliserons cette fonction à partir du fichier js) - filename - infoform.vue

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}
0
Meet Zaveri