I have a laravel project which globally registers vue in the app.js file. Vue works in my project as I have it working in another part of my app. What makes this situation unique is I do not have somewhere, like a blade file, to pass my vue component through as a medium to be used. I have a vanilla js file and a vue component. I want to be able to use the methods created in my test.js file inside of my testing.vue file. I am simply trying to pass some data from my js to my vue and then console.log() it out to ensure the data is being passed properly. I do use npm run dev to compile assets. The code is pretty boiler plate at this point since my main objective right now is to just pass the data properly. I did confirm the import path as well and it is correct. Not sure why the console.log() is not showing in the browser. This is my current code:
Test.js
export class Test {
testing() {
console.log('this is a test');
}
}
Testing.vue
<template>
<div>
</div>
</template>
<script>
import {Test} from '../../js/Test';
export default {
name: 'Testing',
mounted() {
console.log(Test.testing());
}
}
</script>
You must create an instance of the Test class in order to use the method. In your Testing.vue file:
<template>
<div>
</div>
</template>
<script>
import {Test} from '../../js/Test';
export default {
name: 'Testing',
mounted() {
// IMPORTANT to create instance of a class
const myTestInstance = new Test();
console.log(myTestInstance.testing());
}
}
</script>
The method testing() on class Test is not a static method and thus need object to invoke. Alternately, if you don't want to create object, then you can declare the method as static as shown below:
export class Test {
static testing() {
console.log('this is a test');
}
}
You can then us it like this: Test.testing().
Related
I have used Vuetify.js as Nuxt.Js's UI framework.
I wanted to get file object when I input file my apps.
So I used v-file-input component in Vuetify.Js
and I made code like below.
<template>
<div>
<v-file-input
label="fileinput"
multiple
v-model="files"
#change="getFileObject()"></v-file-input>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
#Component({})
export default class extends Vue{
files:any = []
fileObj:any = {}
async getFileObject(file:any){
this.fileObj = await file
console.log(this.fileObj)
}
}
</script>
I checked the file object using console.log.
but 'this.fileObj' is undefined.
How do I get file object when I input files?
Could anyone advise me?
If you remove the empty argument from the handler, it should be passed implicitly. It should also be on this.files which is used as the input's v-model:
#change="getFileObject"
methods: {
getFileObject(file:any) {
console.log(file);
console.log(this.files)
}
}
#change event has one parameter which the files array :
#change="getFileObject($event)"></v-file-input>
then in script:
async getFileObject(files:File[]){
this.fileObj = await files
console.log(this.fileObj)
}
I am trying to load a custom JS file into my vue and I recently came across vue-plugin-load-script and installed it. I configured it as below:
In my main.js I have
Vue.loadScript("file.js").then(() => {
console.log("SUCESS")
}).catch(() => {
console.log("FAILED")
})
however, the npm page does not show how to use your functions in your views. For instances, lets say the file.js had a function called calculateTime(), and I have a view called Home.vue. How would I call the calculateTime() function from my
<script>
export default {
methods : {
** Trying to put function here **
}
}
</script>
If you have you JS File local, you can import it, like:
import * as localA from "./../../theFile.js"; /*put your path to file.js*/
And after that you can use all methods from theFile.js by writting in a method from your vue Component
methodVue: function (...) {
localA.theMethod(param); /*the Method is declared in theFile.js*/
return;
}
And in your theFile.js your method that you want to use need to be written like that
export function theMethod(param) {
...
}
Do you have a specific reason to use this library? Looking at the function all it does is add a script tag to the DOM if it is not already there and resolve the promise when it loads GitHub link. You could just as well use import * from 'file.js' at the top of the vue file. Then use the functions from that file as usual. The bundler should be able to figure out if the file is imported in multiple places and add it only once.
I'm trying to figure out how I can bundle some Components which use the same data (from an API) so I only need to make one call. I'm learning VueJS right now and I don't know if this is even possible or how it is called. So basicly what I'm trying to archive is this:
Create an index.js file which get's the data from the API and bundles the components which use this data (or parts of it).
Useing import {subComponent} from '#/components/bundle/' to get a specific component from that bundle while it uses the data delivered by index.js
Is this possible? Probably this is common but I don't know what it's called. How can I realize this?
So far I tried this:
view.vue:
<template>
<subComponent1/>
</template>
<script>
import {subComponent1} from '#/components/bundle';
export default {
name: 'view',
components: {
subComponent1
},
</script>
index.js (in components/bundle/):
<script>
import subComponent1 from './subComponent1'
import subComponent2 from './subComponent2'
export {
subComponent1 ,
subComponent2
}
</script>
The Components are standart single-file components and don't use data from index.js yet, but I'm already getting this error:
What am I doing wrong?
I'm building a website that is based on Nuxt TypeScript Starter template. I've created a dynamically routed page _id.vue inside of my pages folder and I want to have access to that id property inside of my TS class.
I can access it in my template by writing {{$route.params.id}} but when I try to reference $route inside of the class I get an error:
error TS2304: Cannot find name '$route'.
As a simple solution, try importing route from vue-router, like this:
<script lang="ts">
import Component from "vue-class-component"
import { Route } from "vue-router"
#Component({})
export default class RoutingExample extends Vue {
created() {
console.log(this.$route) // this should not throw TS errors now
}
}
</script>
Other solutions I think would require you to augment the Vue module, something similar to what you'd find here in the Vue docs.
More Vue + TypeScript examples can be found in this repo: https://github.com/jsonberry/vue-typescript-examples
better and the right solution for nuxtjs project to find current page URL or param just use
{{ $nuxt.$route.name }}
I was able to access route.params via fetch function, taking params from the context object that is passed to this function by default:
<script lang="ts">
import Component from "nuxt-class-component"
#Component({})
export default class RoutingExample extends Vue {
fetch ({ store, params }) {
console.log("params:", params.id);
...
}
}
</script>
but the caveat is that params would only be available in that fetch hook, not in other hooks such as created or mounted. So Jason answer is also valid
I'm working on creating an Angular 2 front end on an existing project that previously just used JQuery. Is it possible to invoke a JQuery method inside of an Angular 2 component, when that JQuery function exists in a separate file? I'm writing my components in TypeScript, in case that is important to know.
For example, I have a JavaScript file called EditCheckBoxes.js with a method called editCheckBoxes(). In order for editCheckBoxes() to work, I need it to be invoked after a certain component is initiated. My attempted solution was this:
ngOnInit(): void {
editCheckBoxes();
}
This code gives me the following error:
Cannot find name 'editCheckBoxes'.
Is there any way I can get this to work?
Also, I added declare var $: any; to my component file, so I am able to use JQuery within that component, but I'd rather not copy entire files into my components in order to use them.
EDIT:
The folder structure looks like this:
Plan
app
selling
My Angular 2 component
Scripts
EditCheckBoxes.js
In my component, the import statment looks like this: import { editCheckboxes } from '../../Scripts/EditCheckboxes';
You need to import the editCheckboxes method in your typescript file for it to be available.
To do that you first need to export the editCheckboxes function from EditCheckBoxes.js
export function editCheckboxes() { ... }
Next you should just import that function inside your component
import { editCheckBoxes } from './EditCheckBoxes';
Now it can be called in your component: editCheckBoxes();
In order to import function from js file you should at first export it like so:
// EditCheckBoxes.js
module.exports = function editCheckBoxes () { ... };
then add a d.ts file in same directory as your js-file with definition of your module that would be used by Typescript
// EditCheckBoxes.d.ts
declare function editCheckBoxes (): void;
export = editCheckBoxes;
then in your Typescript file you would specify your definition file, import your function and use it like so:
/// <reference path="../../Scripts/EditCheckBoxes.d.ts" />
import editCheckBoxes = require('../../Scripts/EditCheckBoxes');
ngOnInit (): void {
editCheckBoxes();
}