Software
How can I make vuefire show loading screen?
As title Vuefire can auto get data from firebase database, but it needs some loading time. So I want to display some css animation before data being fetched, is there any event can I $watch when it successed
Move Vue JS project from localhost to a public server
I just finished a basic project in Vue JS, on my localhost server. Now, what I want to do is to move all the content from localhost to a public server. What can I do to solve this problem?
Show gist scripts in Vue js
I am working with a Vue-js based website and showing data using JSON API. I parse data using Axios and returned the response to my view.
My JSON API contains some HTML data including an embed gist like below
<p>Some informative text here <br /> <script src="https://gist.github.com/nisat19/8e8e2c03ecbf198daef168948548d481.js"></script> </p>In the view, I tried to render my data with v-html
<div v-html="content"></div>It successfully parses only the HTML portion but does not render the gist. i.e
Some informative text here /* Gist Script Missing */
Is there any way to parse the script?
Better way to create a web application with Java and Vue
I'm starting to get into web development a little more. Currently I use the Spark Framework along with Vue for the few apps I've made. While this certainly works it's not ideal.
The project is built with Maven (and NPM for Vue) and the build process looks something like this.
- Maven packages the Spark Framework Java application
- Maven (with the frontend-maven-plugin) downloads node/npm and builds the Vue frontend
- Maven copies the compiled resources into the jar as static assets
So the filesystem looks something like this
/src/main/java (Spark Framework)
/src/main/resources (Vue)
This leads to a couple of annoyances.
- Everything is in one repository. Ideally I'd be able to have a separate repo for each project
- Development workflow isn't ideal. If I just want to test the Java part of the app, I still spend time compiling the frontend (Vue)
- A minor issue, but while working in an IDE, I'm dealing with deeply nested folders. Anytime I want to edit the frontend, my folder structure looks something like /src/main/resources/project-vue/
Here's one of my projects that uses this model
So my question is: What's a better way to structure my application?
how to get the component instance within an @click event?
I have a button in a Vue component
<el-button class='range-right' @click='deleteItem(item)'>delete</el-button>within it's handler I want to invoke other methods of the component. however, even though I can call deleteItem which is itself a component method, I cannot get at the actual component for other methods.
is there a way to pass something like a $component param to the @click event?
methods { deleteItem: (item, obj) => { let api = '/api/train/deleteItem?_id=' + item._id let resource = Vue.resource(api) let vm = this // NOT a component window.delItem = this console.log('deleteItem.this', this) resource.delete(api) .then(items => { console.log('deleted') vm.methods.load() //<< fails }) },Update nav bar links to active and smooth scrolling
I am trying to implement a nav bar with list of <a> tag to navigate to different part of the current page and the tag should change class to active when the user is scrolling through the page.
Not sure what is the best way to implement it on a Vue app but I do not want to use bootstrap with jquery on it.
I found a framework agnostic library: https://github.com/cferdinandi/gumshoe and smooth scrolling now works, but the anchor tags are not being set to active. Tried a couple of other libraries to implement the updating of active but to no avail.
So I am not sure if I am setting those external libraries correctly in Vue.
What I did was include this in my index.html
<body> <div id="app"></div> <!-- built files will be auto injected --> <script src="static/js/gumshoe.js"> </script> <script src="static/js/smooth-scroll.min.js"> </script> <script> smoothScroll.init({ offset: 20 }); gumshoe.init(); </script> <script src="static/js/scroll-spy.js"> </script> </body>Usage
<ul class="nav-right-items" data-gumshoe> <li class=""> <a data-scroll data-scroll-spy href="#about" class="">About me </a> </li> <li class=""> <a data-scroll data-scroll-spy href="#experience" class="">Experience </a> </li> </ul>Vue router-link exact active class
I have a 3 of menu tabs (i.e. router-links) that correspond to 3 different routes:
/ --> home /users --> users /posts --> postsThe first router-link going to / has the exact property applied, so it does not receive an active class when on /users or /posts. This works for most cases, however I am planning on allowing query parameters on the / route. For example:
/?ref=producthuntIn this case, the / router-link should still be active. However, given I have the exact property on it, it is not matching the url with the ref query parameter. Outside of adding additional logic to my component to test the route and flip classes, is there some feature of the router-link component I can use to solve this?
Vue App structuring
I am currently trying to build my first webapp using vue.js
Now 2 days of tutorials deep I am still not 100% sure how to structure a basic application. Using the vue-cli and webpack already makes a nice structure, including a /src Folder with components and a /router Folder for routing.
Now my plan is to create a ToDo App. I want to dynamically switch between [show todos] and [add todo], which is just a form with a submit button. I have already achieved it by using it without components and the cli.
My structure would be:
App.vue -> buttons with the two router-link to components/ShowTodos.vue & components/AddTodos.vue
components/ShowTodos.vue -> Table including the todo list
components/AddTodos.vue -> Form with submit button
Now the routing part works, I am able to switch between those two components.
Now 2 Questions:
- How can I push the information from the form in the AddTodos component into an Array in the ShowTodos component in order to loop through there ?
Is this a proper way to structure an vue app, and if not how can I improve it ?
Thank you very much.
This is the first time for me using a component based JS Framework, so its pretty hard to follow along.
VueJS - Why "this" is being used in this case?
I'm learning VueJS and I figure out the usage of "this" in some cases. By example: to access some atribute in the data().
But, I tried to call a method inside another method and was doing nothing because I wasn't using "this" to call the other method. Can someone explain the more detailed the general and in this case usage of "this"?
methods:{ sendData(){ this.$http.post('FIREBASE-LINK/data.json', this.user).then(response=>{ console.log(response) this.getData() }).catch(err=>{ console.log(err) }) }, getData: function () { this.$http.get('FIREBASE-LINK/data.json').then(resp=>{ this.users = resp.body }).catch(err=>{ console.log(err) }) } }Vue + Typescript + Webpack: Module build failing - Can't find vue.esm.js
I am trying to build a basic project using typescript, webpack and vue.js. However, when i run webpack from the command line, I am currently getting the following error:
ERROR in ./node_modules/vue/dist/vue.esm.js Module build failed: Error: Could not find file: 'c:\Users\user\Games\javascriptTimeGame\node_modules\vue\dist\vue.esm.js'. at getValidSourceFile (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89078:23) at Object.getEmitOutput (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89448:30) at getEmit (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:122:43) at successLoader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:42:11) at Object.loader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:29:12)This is strange, because the file it says it can't find is definitely there.
My main script: script.ts, looks like:
import Vue from 'vue' function main(){ let vueApp = new Vue({ el: "#vue-test", data : { message: "Hello World" } }); } main();My tsconfig.json looks like:
{ "compileOnSave": true, "compilerOptions": { "target": "es6", "module": "es6", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "strict": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true, "outDir": "../jsDist", "allowJs": true } }My package.json dev dependencies look like:
"devDependencies": { "@types/vue": "^2.0.0", "http-server": "^0.10.0", "node-sass": "^4.5.3", "npm-run-all": "^4.0.2", "ts-loader": "^2.3.3", "typescript": "^2.4.2", "vue": "^2.4.2", "watch": "^1.0.2", "webpack": "^3.5.5" } }And my webpack.config.js looks like:
module.exports = { devtool: 'inline-source-map', entry: "./ts/script.ts", output: { filename: "bundle.js", path: `${__dirname}/jsDist` }, module: { rules : [ { loader: 'ts-loader' } ] }, resolve: { extensions: ['.ts', '.js'], alias: { 'vue$': 'vue/dist/vue.esm.js' }, } }A few things I've noticed that might isolate the problem.
First, If I simply run tsc to directly build my source files with the typescript compiler, then it works perfectly without error. This suggests there is something wrong with the webpack part specifically.
Second, If I alter script.ts to just be:
import Vue from 'vue' function main(){ console.log("Harmless"); } main();Then webpack builds it without fuss. This suggests that it is not the top-line import that webpack seems to have a problem with, but specifically the usage of Vue.
Finally if I alter my webpack.config.js such that ts-loader has the additional option transpileOnly: true then it also seems to build without fuss (but of course I don't want to do this, as then I lose my reason for using typescript in the first place!)
Any ideas what might be causing this error?
How to make components wait for Ajax changes
How can I make my components wait for an ajax call to complete before being rendered? Right now, their data objects are empty because the ajax call has not completed when they are mounted.
Additionally, I want all components to have access to this ajax data, which will be refreshed and updated every 30 seconds. What is the best way to achieve this?
//Snippet of what gets return from ajax call { 121: { table_info: { id: "121", name: "Test", table_number: "51", cap: "6", seating: "OPEN", position_x: "0.19297285", position_y: "0.07207237", participants_in_tables: "5", count: 5 } } }//Global var tableData; //This gets set when the Vue ajax call is complete after being mounted var width = $(document).width(); var height = $(document).height(); //Vue Vue.component('tables', { data: () => { return { tables: tableData } }, template: ` <div id="tableContain"> <div class='table' v-for="table in tables" :style="computeOffsets(table)"> {{table.table_info.name}} </div> </div> `, methods: { computeOffsets(table) { return { top: (table.table_info.position_x * width) + 'px', left: (table.table_info.position_y * height) + 'px' } } }); var app = new Vue({ el: '#main', mounted() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getTableAssignments/' + event_id }).done(data => { tableData = data; //Set global tableData }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="main"> <table></table> </div>
VueJS - How to get data and pass this immediately after create and send to firebase?
I'm trying to get the data and show this immediatly after send to firebase. But, I just get the know data after render or reload the page again. I wanna display/show the data after send it, without have to reload the page. I tried to make get requests with mounted and created lifecycle hooks, but again, only show if the component is re-rendered or reloaded.
Here is my code:
<template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <h1>Http</h1> <div class="form-group"> <label for="name">Username:</label> <input type="text" name="name" v-model="user.username"> </div> <div class="form-group"> <label for="email">email:</label> <input type="email" name="email" v-model="user.email"> </div> <button class="btn btn-success" @click="sendData">Send data</button> </div> <div> <ul v-for="u in users"> <li>{{u.username}}</li> <li>{{u.email}}</li> <hr> </ul> </div> </div> </div> </template> <script> export default { data(){ return{ user:{ username:'', email:'' }, users:[] } }, methods:{ sendData(){ this.$http.post('FIREBASE-LINK/data.json', this.user).then(response=>{ console.log(response) }).catch(err=>{ console.log(err) }) } }, mounted(){ this.$http.get('FIREBASE-LINK/data.json').then(resp=>{ this.users = resp.body }).catch(err=>{ console.log(err) }) } } </script> <style> </style>Pass for loop item to prop
How do you pass the item instance from the foreach loop as a prop?
<div v-for="n in parentArray"> <blog-card prop="{{ n.content }}"></blog-card> </div>When I run this I get an error
(Emitted value instead of an instance of Error)
Can this be done without rebinding the item to the parent component?
Bol Com Vacature
How to handle multiple on change events on drop-down selection in vuejs
I have a problem where user needs to select countries first and then states and then cities. Now I have setup @change event on countries and states, as soon as the user selects country it fetches states and also @change on states is also triggered, and since I have state_id = '', now my getCities function fails.
<select v-model="country_id" @change="getStates()"> <option v-for="country in countries" :value="country.id">{{ country.name }}</option> </select> <select v-model="state_id" @change="getCities()"> <option v-for="state in states" :value="state.id">{{ state.name }}</option> </select> data(){ return{ countries: [], states: [], cities: [], country_id: '', state_id: '', city_id: '' } }, mounted(){ getCountries(); }, methods:{ getCountries(){ // this.countries = response.data } geStates(){ //get states where country_id = this.country_id }, getCities(){ //get cities where state_id = this.state_id //once country is selected even this is getting triggered } }VueJS - v-for and attributes on the parent Element
I'm working with a table display and am using vueJS to render a group of rows inside of a table. The bindings inside of the <tr> work fine, but I can't figure out how to bind say an attribute that lives on the parent <tr> that hosts the v-for directive:
<tr v-for="detailItem in itemList" data-key="{detailItem.pk}}"> <td>{{detailItem.cdesc}}</td> <td>{{(detailItem.nnetunits * 1).toFixed(2)}}</td> ... </tr>In this code the inner items on the <td> bind just fine, but how would you get the data-key bound?
How to make component(s) data equal to global object
I want my components to share one piece of global data, which is a global variable that gets set via ajax when my main Vue instance is mounted. However, the component data is empty when I try to set it in the code below. How do I property set a component's data equal to a shared global object?
If it's an ajax problem, how would I get the component to wait for tableData to get set or have my component watch tableData for changes?
//Snippet of what gets return from ajax call { 121: { table_info: { id: "121", name: "Test", table_number: "51", cap: "6", seating: "OPEN", position_x: "0.19297285", position_y: "0.07207237", participants_in_tables: "5", count: 5 } } }//Global var tableData; //This gets set when the Vue ajax call is complete after being mounted var width = $(document).width(); var height = $(document).height(); //Vue Vue.component('tables', { data: () => { return { tables: tableData } }, template: ` <div id="tableContain"> <div class='table' v-for="table in tables" :style="computeOffsets(table)"> {{table.table_info.name}} </div> </div> `, methods: { computeOffsets(table) { return { top: (table.table_info.position_x * width) + 'px', left: (table.table_info.position_y * height) + 'px' } } }); var app = new Vue({ el: '#main', mounted() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getTableAssignments/' + event_id }).done(data => { tableData = data; //Set global tableData }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="main"> <table></table> </div>
How can import custom js file from assets on vue js?
How can import custom js file from assets on vue js?
I try this;
<script src="./assets/js/dragging.js"></script>But that's code not working.
How to use input type='file' to read word documents
Users can upload their ms word files, of which the text should be displayed on another page. My html and javascript(vuejs) is like this:
HTML
<form> <input type='file' v-on:click='retieve'> </form>JS
retrieve: function retrieve(e){ var asfarasicansee = e.target.files[0] console.log(asfarasicansee)This will return some file info as described here in the getting info paragraph: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
The only other thing I could find was this from 2001 and it only works in Internet Explorer, but my other code doesn't work in Internet Explorer: https://snook.ca/archives/javascript/copying_from_mi
Does anyone know how to work with MS word(or any other text editor) files? How do I retrieve the text from such documents?
Vue.js can template without no root element or vue el specify for two div
HTML:
<div class="a"> Some HTML ... </div> <div class="b"> Some HTML </div>Javascript:
new Vue({ el: "#item_info", .... .... (Other Config) .... .... })The two div above need to show the information from vue,
I tried using <template></template> like:
<template> (my two div) </template>but it not work because it need the root element.
I know that if I modify my html to:
<div id="item_info"> <div class="a"></div> <div class="b"></div> </div>It can work, but I have no authorization to modify the base Html structure
Is there has other way can help me to solve it.