Software

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?

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)