Software

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:

1. 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 ?

2. 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.

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) }) } }

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 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>

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>

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?

Onlangs vond ik via LinkedIn een advertentie voor de vacature ‘Senior Category Manager Domestic Appliances’ bij bol.com. Hierin stond zoveel wartaal dat ik het de moeite vond een ‘best of’ selectie te delen op Facebook. Daar vond men het ook erg grappig. Desondanks is het de moeite waard de vacature te decoderen: wat staat hier nou eigenlijk? Of exacter, wat bedoelen deze mensen. Komt ie. Update: Inhoudelijke reactie van bol.com in De Telegraaf

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 } }

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?

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?

I try this;

<script src="./assets/js/dragging.js"></script>

But that's code not working.

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?

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.

I have two separate components. In one component, I have an input, and on another component I want have a variable that is always equal to the input value. I don't want to bind it an event which will limit me to that event; I want to constantly watching it. Thus, I thought $emit is not a good option.

What is the appropriate way of achieving this?

Vue.component('first', { data: { helloVal: "Hello world" } template: ` <div> <input :hello="helloVal"> </div> ` }) Vue.component('first', { template: ` <div> <p>{{ helloVal }}</p> </div> ` })

How can I make hello to always be equal to helloVal? Can I use v-model: between separate components?

I'm using laravel framework.I installed npm and npm packages.ı run "npm run dev " Everything is okey. But ı cant use vuejs in blade. Im sure app.js file is correct. So vuejs file doesnt appear in web page's source code.And also ı installed sweetalert2 package . I followed instructions. I wrote in app.js like that import swal from 'sweetalert2' .but it looks comment line in my editor and it gives error when ı run npm run dev

I am creating a stock exchanger website with php using laravel frame work and MYSQL to solve realtime updating issue, I was thinking to use Vue.js but the problem is, if I setTimeOut 500 for getting latest data and there be more than 10,000 user in the exchange page it means every second I am sending 20,000 query to database to get all the data for each user.
My question is, is there any better way? For example I just update one file, and those users only load that file instead of using 20,000 MYSQL query every second?

In vue.js I have .vue component which has a watched data property isRunning. This component has a child component which also watches isRunning (accessed through its binding). Can I be assured that the watcher for the parent will be executed before the child's watcher?

I am on migrating to Vue from React, and I just liked the v-model thing Vue offers. Now I am in a situation and not able to find out what is the vue-ish way of doing this.

Here is how my component tree looks like:

- FormContainer -FormView - CustomInput - input

I have my states in FormContainer let's call it name and age. I want to avoid writing custom setter methods as I usually do using v-model, how can I go about passing the data down to the input component.

I should be able to do something like

<form-view @age="age" :age="age" @name="name" :name="name"/>

or something similar. Please let me know if you need more details on this.

I have the following script:

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ scrollBehavior (to, from, savedPosition) { // purposely left blank }, routes: [ { path: "/", component: SampleComponent } ] }

I would like to add a handler (afterEach) to the router so that I can close any open menus when a router link is taken.

I tried to add it to the constructor but it is not a constructor argument. So I tried:

Router.afterEach((to, from) => { // ... })

But I get the error: "afterEach is not a function"

How do I appropriately add an afterEach callback with this setup?

Thank you in advance for your help.

I am using the node package p-queue (GitHub repo) in order to ensure that the axios.get requests from my app are sequential and at a max rate of 1 per second.

I need to add some requests to the queue depending on data from a previous request so I thought I would just loop over an array and add new axois promises to the p-queue according to the length of that array, but I keep getting odd errors

I cannot show the code directly, but here is a small example that has the same problem:

var ml = [1, 2, 3, 4] for (var i = 0; i < ml.length; i++) { promq.add(() => axios.get('http://example.org/' + ml[i])) .then(response => { console.log(response.data) }) }

This will correctly enqueue 4 promises and axios will correctly produce 4 http 404 responses, but that is because it is trying to visit not example.org/1, but instead it makes 4 requests for example.org/undefined

Why is this not working?