I'm currently using the google-maps-api-loader so I can render a google map in vue.js and place markers on it. The data are all retrieved from a json file and I had no problem with the markers but now I have to connect them using an encoded path from the json file. I have some sample pure javascript that decodes the route and I'm trying to do the same in Vue.js but it seems the geometry thing isn't working. What can i do?
I
path: google.maps.geometry.encoding.decodePath(route)
First, you have to enable geometry on
Vue.use(VueGoogleMaps, { load: { key: 'xxxxxxxx', libraries: 'places,geometry', , installComponents: true});
Then on your target file,
initial a google:gmapApi on computed,
Finally, the path should be like this
:path="google && new google.maps.geometry.encoding.decodePath(routes)"
Related
I'm a total beginner with Vue.js and struggling to find the answer to what I feel is a fairly basic need.
I have a JavaScript library that cannot be installed locally and must be imported via script tag in the index.html file in the old-fashioned way:
<script src="https://foo.bar/scriptyscripts.js"></script>
This library has a bunch of methods in it that I need to use in various spots throughout my app, so it's not going to be a problem to load it globally. The issue I'm facing is that it's loading fine, but the methods are not being recognised in components.
I can use the methods and whatnot if I put them all in a script tag in the index.html however doing that rather defeats the whole point of having components.
Can anyone help me with the step that I'm missing to register all of the methods in this loaded js file so my components don't get mad?
Specifically, the script contains require.js and a collection of other things including JQuery.
Including the library makes the method 'require' available, which is used to load other modules on demand - the example being "js/qlik" in the below snippet. "js/qlik" loads JQuery and a stack of stuff associated with "qlik".
//async login method here. not relevant to this problem
login().then(() => {
require.config({
baseUrl:
(config.isSecure ? "https://" : "http://") +
config.host +
(config.port ? ":" + config.port : "") +
config.prefix +
"resources",
webIntegrationId: config.webIntegrationId,
});
//Load js/qlik after authentication is successful
require(["js/qlik"], function (qlik) {
qlik.on("error", function (error) {
$("#popupText").append(error.message + "<br>");
$("#popup").fadeIn(1000);
});
$("#closePopup").click(function () {
$("#popup").hide();
});
var app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
});
});
The problem I have is that if I load this library in the index.html file and then try to execute the methods in the snippet above in any component, it does not know that the methods are available.
I see:
'Module not found: Error: Can't resolve 'js/qlik'
66:11 error '$' is not defined
which indicates that the components are unaware of the methods because they're not registered like they would be if I were importing a packaged afterinstalling it locally via NPM
i.e. Your original js code: function abc(){// sth...}
What you need: window.abc = ()=>{// sth...}
Even if you want it in Vue dom.
You should add vue.prototype.abc = ()=>{//sth...}
I am trying to serve a static HTML file using the res.sendFile() method from my express.js server that is hosted on AWS Lambda using the Serverless framework. Assuming that I am trying to serve an HTML file from the directory src/views/users/index.html.
In deployment, this is the file path that I have tried to serve my HTML file from /var/task/src/views/users/vindex.html, but I keep getting the error Error: ENOENT: no such file or directory, stat '/var/task/src/views/users/index.html' when viewing the AWS Cloudwatch log.
app.use(express.static(__dirname));
path.resolve(__dirname, "./src/views/users/index.html");
This is the results I get when I run tree src locally:
Have anyone experienced this issue before, and have solved it? Thank you so much!
Well, after many grueling hours and trying many solutions, I have found a workaround to render the html content without actually needing to render a .html file.
I ended up making a helper method that returns a string of the html content and send the html content string using the res.send() method instead.
html helper function
export const htmlHelper = () => {
return `<html content goes here>`;
}
route method
app.get('/html', (_, res) => {
const htmlString = htmlHelper();
return res.send(htmlString);
})
I'm trying to display a dynamic image with v-bind and it s not working
in template tag:
<img v-bind:src="test" />
in script tag :
data() {
return {
items: [],
imagesref: "",
test: '~/assets/captures/ref_01_03_2022_17_05_21/#DHRD-52484/user language check dates in different language/1.png'
};
I tired to use the test path on an img tag to check if there's something wrong with the path but it worked fine.
how can i fix this
v-bind:src works as expected. The problem is your path makes no sense in the context of your web page.
To translate a project path into a web path, use vue-loader. Namely:
test: require('./relative/path/to/image.png')
Or you can make use of the existing transform rules.
Note: This might vary based on configuration, but in a standard Vue project, replacing ~/assets with #/assets should fix the problem, without needing require().
I have a Nuxt Content project, which fetches a number of content files like so:
/content/resources/item.yaml
---
item:
title: Hello World
pdf: sample.pdf
Which is pulled into the Vue component:
async asyncData({ $content }) {
const resources = await $content('resources').fetch()
return { resources }
},
Where should the PDF file go in the Nuxt folder structure? and how should it be referred to in the YAML file? I'm trying something like:
/content/resources
-- item.yaml
-- sample.pdf
and then in Vue: <a :href="item.pdf" ..., which always just results in https://url/sample.pdf, which does not load obviously. What is the obvious thing I am missing, as I can't find it anywhere in the Nuxt Content docs?
/content/resources
-- item.yaml
/assets/files
-- sample.pdf
and referencing /assets/files/sample.pdf also doesn't work.
The Nuxt Content docs describe using static assets for this.
Move sample.pdf to static/ in the root of your Nuxt project (e.g., in static/sample.pdf), and then use its static-relative path in your pdf YAML property:
pdf: /sample.pdf
I have a Vue.js + Electron app (electron-vue boilerplate)
What are the best practices of getting and displaying directory's folders and files?
Basically I want it to behave like a File Explorer (Windows) or Finder (Mac). You open a folder you get all the content displayed.
Let's say we have:
the main view called App.vue with a router inside of it.
there's an open folder button in App.vue.
And we also have FileExplorer.vue component that is getting displayed as a route inside that App.vue
How do I make this FileExplorer.vue component to get and display files and folders of, let's say, directory C:\test folder (on Windows) when we hit that open folder button in App.vue?
I know that I should use Node for that, but how exactly? What do I import and how do I use Vue to make it all work together?
All the projects on Github are too complicated for a newbie to understand how they work. For example this one is quite simple looking, but there's so much code in there that you don't even know where to start
Update:
I managed to get the content of a folder doing this:
<v-btn #click="readDirectory"></v-btn>
[...]
const fs = require('fs-extra')
export default {
name: "FileExplorer",
data () {
return {
dir:'C:/test',
files:[],
file:""
}
},
methods: {
readDirectory() {
fs.readdir(this.dir, (err, dir) => {
console.log(dir);
for(let filePath of dir)
console.log(filePath)
this.files = dir
})
},
}
}
And I displayed it like this:
<v-btn v-for="file in files" :key="file.id">
{{file}}
</v-btn>
But it doesn't really behave like a real file explorer...I get the folders and files on button click but I can't do anything with all those folders and files.
How do I make all the folders that it gets on click to behave in a similar way (to get its content) ?
And how do I display folders and files differently?
If you simply want to allow a user to select a folder in Electron I would suggest using the showOpenDialog API.
In the renderer process, you need to use the remote API to access the dialog API.
const { remote } = require('electron')
remote.dialog.showOpenDialog({
properties: ['openDirectory'],
defaultPath: current
}, names => {
console.log('selected directory:' + names[0]);
});
If you want to display the contents of a directory within your app you're going to have to use the node fs module and read the directory contents.
fs.readdir(path[, options], callback)
Will callback with all the file and directory paths which you'll then have to iterate over to get more info or to traverse recursively to get their contents. There are are node modules which make this process a little easier than writing it all yourself.
Once you've got an object tree containing all your files and directories you can use this to create a UI using vue.js.