Software

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?

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?

I am use vue 2.0.

<Poptip placement="right" width="400"> <Button type="ghost">click 激活</Button> <div class="api" slot="content">my content</div> </Poptip>

I need render function

render: (h, params) => { return h('Poptip', { props: { placement: 'right' } }, [h('Button', { props: { type: 'ghost' } }, 'Edit'), h('div', { props: { slot: 'content' } }, 'My content')]) }

if i using template it's work perfect But i used render function then slots content not replace with my content

I have a Login end point that respond me a json. I'm using vue-router to do a POST and then Store a token in localStorage, but after the POST, the json shows on the screen:

{"success":false,"message":"Login ou senha inválidos!"}

It should return on the page login, with the message

This is the code:

var vmLogin = new Vue({ el: '#login', data: { email: '', msg: '', password: '' }, beforeCreate: function () { if(localStorage.getItem("timeTaskToken") !== null) { window.location.href = '/' } }, methods: { getLogin: function (e) { this.$http.post('/login', {email: this.email, password: this.password}).then((response) => { alert('teste!'); if(response.body.success === true) { localStorage.setItem("timeTaskToken", response.body.token); window.location.href = '/' } else { this.msg = response.body.message } }, (response) => { // error callback }); e.preventDefault(); } } });

login page

<form id="login" class="form-horizontal" method="post"> <h3>{{ msg }}</h3> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" v-model="email" class="form-control" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" v-model="password" class="form-control" name="password" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" @click="getLogin">Sign in</button> </div> </div> </form>

It's like nothing after .then works...

The returned JSON just appear in the screen.

I am starting with the snippets in this question How to use multiple vue components on single page? The following example works with vue build app.vue, but it does not work if I set up a simplest server and visit index.html.

index.html:

<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <script type="text/javascript" src="jspm_packages/system.js"></script> <script type="text/javascript" src="config.js"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> System.import('app.js'); </script> </body> </html>

app.js:

import Vue from 'vue/dist/vue.js' window.onload = function() { new Vue({ el: '#app', render: h => h(app) }) }

app.vue:

<template> <qwop></qwop> </template> <script> import qwop from 'qwop.vue' export default { components: { 'qwop': qwop } } </script>

qwop.vue:

<template> <div>Hello</div> </template>

Through running vue build app.vue, a web server is launched and I can see "Hello" in the web page. But nothing shows if I create a web server by for example python -m http.server and visit index.html. Anything wrong with my index.html and app.js?

I have a loop like this:

<div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <button v-on:click="upvote"><i class="fa fa-arrow-down"></i></button> <div>

I need to get joke.id so that I can post it to backend and increment the votes.

The method should be something like this:

methods: { upvote: function(e) { axios.post( this.BASE_URL + "/api/joke/" + this.joke.id + "/upvote", { token: 'secret', }).then(function(data){ console.log(data); }); } },

How can I achieve this?

Some Context... I have a list of players in a hockey league. For each game played I want to save a gamesheet with the players of the home team and visiting team that would include their game stats. I want the player .key from the full list of players to match the player .key of the stored gamesheet.

The issue I'm having is storing the array of the home/visitor teams to Firebase. The array for 'homeTeam' is the following:

[ { "name": "Steve", "number": "10", "position": "F", ".key": "-KrbKovnJe2uxU2h1Aec" }, { "name": "Carl", "number": "32", "position": "F", ".key": "-KrbKovnJe2uxU2h1Aec" } ]

I can save individual records with the following:

gamesheetRef.child(gameinfo['.key']).child('home').child(this.homeTeam[0]['.key']).set({name: this.homeTeam[0].name})

This saves as the correct structure in Firebase:
- gamesheet - -KonukQ9Pf7ksy9jvgo3 - home - -KrbKovnJe2uxU2h1Aec - name: "Steve"

How can I save the entire array like this, using the .key(s) from the array?

I'm using the vue-cli webpack template and I'm trying to load in local fonts in my project. I'm having trouble getting the path to my fonts correct. How should my path look like?

I found some information about what I might be doing wrong but I couldn't figure it out: https://github.com/webpack-contrib/sass-loader#problems-with-url

File structure:

In my _fonts.scss:

// Webfont: LatoLatin-Regular @font-face { font-family: 'LatoLatinWeb'; src: url('../assets/fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */ src: url('../assets/fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../assets/fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */ url('../assets/fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */ url('../assets/fonts/LatoLatin-Regular.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; }

Webpack.base.config.sj:

{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }

Utils.js:

return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/_variables.scss') } } ).concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/mixins/_mixins.scss') } } ).concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/_fonts.scss') } } ), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }

How do I load my local fonts in with vue-cli webpack template?