Software

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?

I have a component. Once I select a category I need to get the ID and also a boolean which checks if the category has a subcategory, if it does I do a API call to fetch the subcategories.

Html:

<material-selectcat v-model="catId" name="category" id="selcat"> <option v-for="cat in cats" :value="cat.cat_id" :subcat="cat.has_subCat" v-text="cat.category_name"></option> </material-selectcat>

Component:

<template> <select><slot></slot></select> </template> <script> export default { props: ['value', 'subcat'], watch: { watcher: function() {} }, computed: { watcher: function() { this.relaod(this.value); this.fetchSubCategories(this.value, this.subcat); } }, methods: { relaod: function(value) { var select = $(this.$el); select.val(value || this.value); select.material_select('destroy'); select.material_select(); }, fetchSubCategories: function(val, sub) { var mdl = this; var catID = val || this.value; console.log("sub: " + sub); mdl.$emit("reset-subcats"); if (catID) { if (sub == 1) { if ($('.subdropdown').is(":visible") == true) { $('.subdropdown').fadeOut(); } } else { axios.get(URL.API + '/subcategories/' + catID) .then(function(response) { response = response.data.subcatData; response.unshift({ subcat_id: '0', subcategory_name: 'All Subcategories' }); mdl.$emit("update-subcats", response); $('.subdropdown').fadeIn(); }) .catch(function(error) { if (error.response.data) { swal({ title: "Something went wrong", text: "Please try again", type: "error", html: false }); } }); } } else { if ($('.subdropdown').is(":visible") == true) { $('.subdropdown').fadeOut(); } } } }, mounted: function() { var vm = this; var select = $(this.$el); select .val(this.value) .on('change', function() { vm.$emit('input', this.value); }); select.material_select(); }, updated: function() { this.relaod(); }, destroyed: function() { $(this.$el).material_select('destroy'); } } </script>

But inside the fetchSubCategories() function this line always returns undefined console.log("sub: " + sub);

If I check the Vue tab in my chrome inspector I can see that all data exist:

cat_id:0 category_name:"All Subcategories" has_subCat:0

But why doesnt has_subCat get passed as a prop?

Please help! I have 'undefined' props in child template.

Main js:

// some code before window.Vue = require('vue'); import EventBus from '../components/event-bus'; // some code after Vue.component('calendar-select', require('../components/admin/calendar_select.vue')); const app = new Vue({ el: '#app', data: function() { return { isActiveCalendar: true } }, methods: { toggleCalendar() { this.isActiveCalendar = !this.isActiveCalendar; } }, mounted() { EventBus.$on('toggleCalendar', this.toggleCalendar); } });

After i create template like this:

<template> <div class="custom-select" v-bind:class="{ active: isActiveCalendar}" > <div class="box flex" v-on:click="toggleCalendar" > <span>Calendar</span> <img src="/assets/img/admin/arrow-down.png" alt="#"> </div> </div> </div> </template> <script> import EventBus from '../event-bus'; export default { // ------- start props: ['isActiveCalendar'], data: function() { return { } }, methods: { toggleCalendar: function(event) { console.log(this.isActiveCalendar) EventBus.$emit('toggleCalendar'); } } // ------- end } </script>

When i do console.log on this.isActiveCalendar, the variable is undefined. And in Vue plugin for Chrome is same thing.

Please, tell me, what i do wrong!

Thanks!

I can't figure out why vuejs observation don't work on a very simple scenario. When the model "asker" is updated, computed props should automagically update value to 3. Why is this not working ? Fiddle is here https://jsfiddle.net/w1zz9cjs/3/

<div id="simulator"> <c-simulator-form v-bind:subject="asker"></c-simulator-form> </div> Vue.component('c-simulator-form', { props: ['subject'], template: '<div class="c-simulator-form">{{thesize}}</div>', computed: { thesize: function() { return _.size(this.subject); } } }); var vm = new Vue({ el: '#simulator', data: { asker: { a: 1, b: 2 } } }); vm.asker['c'] = 3;

in laravel 5.4.20 and vuejs2. i want to use a simple code captcha in my vue modal component (i dont want to use recaptcha). how can i do it??

im using mewebstudio captcha like this :

Route::any('captcha-test', function() { if (Request::getMethod() == 'POST') { $rules = ['captcha' => 'required|captcha']; $validator = Validator::make(Input::all(), $rules); if ($validator->fails()) { echo '<p style="color: #ff0000;">Incorrect!</p>'; } else { echo '<p style="color: #00ff30;">Matched :)</p>'; } } $form = '<form method="post" action="captcha-test">'; $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">'; $form .= '<p>' . captcha_img() . '</p>'; $form .= '<p><input type="text" name="captcha"></p>'; $form .= '<p><button type="submit" name="check">Check</button></p>'; $form .= '</form>'; return $form; });

but it just work in php documents (i need in vue component)

I have a <select> component that looks like this:

<script> export default { props: ['value'], watch: { value: function(value) { this.relaod(value); this.fetchSubCategories(value); } }, methods: { relaod: function(value) { var select = $(this.$el); select.val(value || this.value); select.material_select('destroy'); select.material_select(); }, fetchSubCategories: function(value) { var mdl = this; var catID = value || this.value; mdl.$emit("reset-subcats"); if (catID) { axios.get(API.URL + '/subcategories/' + catID) .then(function(response) { response = response.data.subcatData; response.unshift({ subcat_id: '0', subcategory_name: 'All Subcategories' }); mdl.$emit("update-subcats", response); $('.subdropdown').fadeIn(); }) .catch(function(error) { if (error.response.data) { swal({ title: "Something went wrong", text: "Please try again", type: "error", html: false }); } }); } } else { if ($('.subdropdown').is(":visible") == true) { $('.subdropdown').fadeOut(); } } } }, mounted: function() { var vm = this; var select = $(this.$el); select .val(this.value) .on('change', function() { vm.$emit('input', this.value); }); select.material_select(); }, updated: function() { this.relaod(); }, destroyed: function() { $(this.$el).material_select('destroy'); } } </script>

But now the API has added one more value which says if the current category has a subcategory, if it does then I must call the API for that subcategory once a selection has been made.

So I have added the value to my props like this: props: ['value', 'hasSubCat'],

What I was thinking now is that I only will run the function fetchSubCategories(value) if the prop hasSubCat of the selected item is = 1.

But how can I watch multiple props? Right now my code only watch the prop value and calls the API once a item in the <select> has been selected if I try to use this.hasSubCat inside my fetchSubCategories() function it will only return undefined. So how can I keep track of what value the hasSubCat prop has?

I want to display ©year in my webpage.

How do I do the following in vue.js

document.write( new Date ().get

We're developing a web api, which is connected by a vue js app, for the client side, we are using vue-resource to post a request to api. We have to keep some data on session, but for each request, web api creates new session. We tried all the topics at stackoverflow that are related with the problem, but any of them couldn't solve the problem.

Global.asax

protected void Application_PostAuthorizeRequest() { if (IsWebApiRequest()) HttpContext.Current.SetSessionStateBehavior(SessionStateBehavior.Required); } private bool IsWebApiRequest() { var apiPrefix = "~/api"; return HttpContext.Current.Request.AppRelativeCurrentExecutionFilePath.StartsWith(apiPrefix, StringComparison.CurrentCultureIgnoreCase); } protected void Session_Start(object sender, EventArgs e) { } protected void Session_End(object sender, EventArgs e) { }