Ggtcf

Why are on-board computers allowed to change controls without notifying the pilots?

Why did Kant, Hegel, and Adorno leave some words and phrases in the Greek alphabet?

How does it work when somebody invests in my business?

What's the purpose of "true" in bash "if sudo true; then"

Applicability of Single Responsibility Principle

Products and sum of cubes in Fibonacci

The plural of 'stomach"

Curses work by shouting - How to avoid collateral damage?

Trouble understanding overseas colleagues

Can I use my Chinese passport to enter China after I acquired another citizenship?

Is a roofing delivery truck likely to crack my driveway slab?

Can somebody explain Brexit in a few child-proof sentences?

Is exact Kanji stroke length important?

Modify casing of marked letters

Your magic is very sketchy

Why "be dealt cards" rather than "be dealing cards"?

Stereotypical names

Is HostGator storing my password in plaintext?

Personal Teleportation as a Weapon

Is there a problem with hiding "forgot password" until it's needed?

How do we know the LHC results are robust?

Have I saved too much for retirement so far?

Can a monster with multiattack use this ability if they are missing a limb?

What is the intuitive meaning of having a linear relationship between the logs of two variables?

how to include an external Vue script in Vue.js

Vue.js - How to properly watch for nested dataVueJS: State from deleted component remains and affects the next one (sibling)Including external script in vue.js templateHow to configure proxyTable to reroute AJAX calls from Vue.js CLI to an exterior API?GSAP implementing to Vue.js app with webpackParticles.js into Vue componentVue axios (and fetch) responses not passing into data property obj.data not displaying in vue template after axios getUncaught ReferenceError: Vue is not defined - but only sometimesCan not save session with VueJS (Front End) and NodeJs (Back End)

1

i am new in Vue.js and i have a question.
I have typed a Vue script (Methods) that i want to use in the other components of my App. so i put this code in a component between tow script tags but i dont know how to use the functions of this Vue script in my Vue App.

Any Ideas to do this ?

Thanks

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

add a comment | 

1

i am new in Vue.js and i have a question.
I have typed a Vue script (Methods) that i want to use in the other components of my App. so i put this code in a component between tow script tags but i dont know how to use the functions of this Vue script in my Vue App.

Any Ideas to do this ?

Thanks

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

add a comment | 

i am new in Vue.js and i have a question.
I have typed a Vue script (Methods) that i want to use in the other components of my App. so i put this code in a component between tow script tags but i dont know how to use the functions of this Vue script in my Vue App.

Any Ideas to do this ?

Thanks

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

vue.js vuejs2 vue-component

share|improve this question

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script>
import axios from 'axios';
 export default 
 components:
 'axios':axios
 ,
 data:function()
 return
 info:" ",
 table:"",
 table_list:[]
 

 ,
 methods:
 FetchData:function(table)
 axios
 .get('http://localhost/cgi- bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?table='+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 ,
 tableList:function()
 axios
 .get('http://localhost/cgi-bin/pbf%20functions%20generator/PBF%20Functions%20Generator%20API2.pl?type=list')
 .then(response => return this.table_list = response.data)
 .catch(error => console.log(error))
 

 ,
 mounted()
 this.tableList();
 
 

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

share|improve this question

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

share|improve this question

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

asked Mar 8 at 10:08

Shafeeq BarramShafeeq Barram

82

1 Answer
1

active

oldest

votes

1

You could use Vue mixins, wherein you can define your methods in a mixin file. This mixin will be mixed with the components methods.

File: mixins.js

var baseMixin = 
 methods: 
 getData: function (target) 
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 
 
;

File: somecomponent.js

Vue.component('some-component', 
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: 
 someMethod: function()
 this.getData
 
 
);

Also the Vue documentation explains it very well here

share|improve this answer

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you too much :)
  
  – Shafeeq Barram
  Mar 8 at 13:54
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55060923%2fhow-to-include-an-external-vue-script-in-vue-js%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You could use Vue mixins, wherein you can define your methods in a mixin file. This mixin will be mixed with the components methods.

File: mixins.js

var baseMixin = 
 methods: 
 getData: function (target) 
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 
 
;

File: somecomponent.js

Vue.component('some-component', 
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: 
 someMethod: function()
 this.getData
 
 
);

Also the Vue documentation explains it very well here

share|improve this answer

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you too much :)
  
  – Shafeeq Barram
  Mar 8 at 13:54
  

  
  
  
  

add a comment | 

1

You could use Vue mixins, wherein you can define your methods in a mixin file. This mixin will be mixed with the components methods.

File: mixins.js

var baseMixin = 
 methods: 
 getData: function (target) 
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 
 
;

File: somecomponent.js

Vue.component('some-component', 
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: 
 someMethod: function()
 this.getData
 
 
);

Also the Vue documentation explains it very well here

share|improve this answer

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you too much :)
  
  – Shafeeq Barram
  Mar 8 at 13:54
  

  
  
  
  

add a comment | 

You could use Vue mixins, wherein you can define your methods in a mixin file. This mixin will be mixed with the components methods.

File: mixins.js

var baseMixin = 
 methods: 
 getData: function (target) 
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 
 
;

File: somecomponent.js

Vue.component('some-component', 
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: 
 someMethod: function()
 this.getData
 
 
);

Also the Vue documentation explains it very well here

share|improve this answer

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

var baseMixin = 
 methods: 
 getData: function (target) 
 axios.get('url'+table)
 .then(response => (this.info = response.data))
 .catch(error => console.log(error))
 
 
;

Vue.component('some-component', 
 props: ['users', 'roles'],
 mixins: [baseMixin],
 methods: 
 someMethod: function()
 this.getData
 
 
);

share|improve this answer

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020

answered Mar 8 at 10:40

Stephen SStephen S

2,08011020