Software
Two functions called in v-on:click. Wait one to finish before launching the other?
I have this div :
[ ... ] <div class="item parent-track" v-on:click="expandTrack(jsonObject.tracks.indexOf(track));setGrey();"> [ ... ] </div> [ ... ]The method expandTrack creates dynamically new items inside the div and I want to launch the method setGrey (which applies to all the template) after the end of rendering.
It seems that this is not what's happening. expandTrack launches but setGrey is not applying to the items which has been created.
Multiple instances of a vue.js component and a hidden input file
I am experiencing a weird behavior using Vue.js 2.
I have a component that I reference twice in a single html page. This component contains an input file control called attachment_file. I hide it using the Bootstrap class hidden and I open the file selection using another button. When a file is selected, I put in a variable called attachment_filename a certain string just like so:
<template> <div> <button @click="selectAttachement"><span class='glyphicon glyphicon-upload'></span></button> <input id="attachment_file" type="file" class="hidden" @change="attachmentSelected"> {{attachment_filename}} </div> </template> <script> export default { data () { return: { attachment_filename: null, } }, methods: { selectAttachement () { $('#attachment_file').click(); }, attachmentSelected () { this.attachment_filename = 'some file here'; }, } } </script>Problem With the class hidden and when a file is selected from the 2nd instance of the component, the value of this.attachment_filename is updated but in the data of 1st instance of the component!
If I remove the class hidden, it updates the value in the correct instance.
Possible solution use css opacity or width instead of the class hidden.
But is there a reason for this behavior?
make rewuest in axios with credentials and data
I need to make this request but in axios
$.ajax({ type: "POST", url: url, data: {'HTTP_CONTENT_LANGUAGE': 'en'}, xhrFields: { withCredentials: true },I tried
params = { data: { 'HTTP_CONTENT_LANGUAGE': 'en', }, withCredentials: true }; axios.post(url, params)But didn't work what do I do?
Json Array object access
I want some help in getting data form json array file is in the link
Html <div> <div v-for="data in myJson.id " >{{ data }}</div> </div> js import json from '.././json/data.json' export default { components: { MainLayout, }, data: function(){ return { myJson:json } }, method:{ getjson:function(){ this.json = JSON.parse(myJson); } } }i want to access only the data with some specific id and i cannot access it using the syntax i am using Json file
How can I bind a VueJS event to a C# razor input?
I have a few dropdowns created with razor html helpers:
@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control" })I want to add a 'change' event handler to this input using VueJS
Normally I would try to add something along the lines of v-on:change="foo()"
However when I try to add this to my razor input, I receive errors because the razor template doesn't support colons as far as I'm aware
@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", new { @class = "form-control", @v_on:change="foo()" }) //^- Not allowedHow can I bind a Vue.js action/event to this input? Is it possible?
Components option failing on webpack build with typescript vuejs
I am trying to use a component within my main .ts file using the components option from vue. However, when I use the components option, I get the following error on build:
(42,20): error TS2345: Argument of type '{ components: { SignOff: "string" | "number" | "boolean" | "symbol" | "undefined" | "object" | "f...' is not assignable to parameter of type 'ComponentOptions'. Types of property 'components' are incompatible.
I am able to resolve the error by using render: h => h(EvaluationMain) instead of the components option, but this doesn't help me too much because in my EvaluationMain I also need to import several components and can't use the render function as far as I am aware.
How can I resolve this error?
Evaluation.html <!DOCTYPE html> <html> <head> <title>Evaluations</title> <link href="../../Content/bootstrap.min.css" rel="stylesheet" /> <link href="./Evaluations.css" rel="stylesheet" /> </head> <body> <div v-cloak id="evaluations-app"> <evaluation></evaluation> </div> <label hidden>Icons by http://www.flaticon.com/authors/those-icons from www.flaticon.com</label> <script src="../../Scripts/jquery3.1.1.min.js"></script> <script src="../../Scripts/polyfill.min.js"></script> <script src="../../Scripts/vue.min.js"></script> <script src="../../Scripts/bootstrap.min.js"></script> <script src="../../Scripts/require.js" data-main="./Evaluations.bundle"></script> <script src="../WebAPI/WebAPI.bundle.js"></script> </body> </html> Evaluations.ts "use strict"; import Vue from 'vue'; import EvaluationMain from './components/EvaluationMain.vue'; new Vue({ el: "#evaluations-app", components: { 'evaluation' : EvaluationMain } //render: h => h(EvaluationMain) }); EvaluationMain.vue <template> <div> <competency></competency> <sign-off></sign-off> </div> </template> <script lang="ts"> import Vue from 'vue'; import * as vts from 'vue-typescript-component'; import SignOff from './SignOff.vue'; import Competency from './Competency.vue'; import bus from './EventBus'; @vts.component({components: {SignOff, Competency}}) export default class EvaluationMain extends Vue{ evaluation = new Evaluation(); initialize = async function () { // intialization details }; get perspective () { // get security perspective }; mounted = async function () { // Stuff to do when mounted }; } </script> <style scoped> </style> tsconfig { "compilerOptions": { // "allowJs": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "lib": [ "es2015", "dom", "es2015.promise" ], // "strict": true, "module": "es2015", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, //"outDir": "./build/", "removeComments": false, "sourceMap": true, "target": "es5" }, "exclude": [ "./node_modules", "wwwroot", "./Model" ], "include": [ "./CCSEQ", "./WebResources", "./sfc.d.ts" ] } webpack.config const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/Evaluations/Evaluations.ts', ExpenseUpload: './WebResources/ExpenseUpload/ExpenseUpload.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules|vue\/src/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".ts", ".js"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']) , new CopyWebpackPlugin([ { from: './Scripts', to: './Scripts' }, { from: './WebResources/Evaluations/*.css' }, { from: './WebResources/Evaluations/*.html' }, { from: './WebResources/ExpenseUpload/*.css' }, { from: './WebResources/ExpenseUpload/*.html' }, { from: './Content', to: './Content' } ]) , new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: './WebResources/[name]/[name].bundle.js', path: path.resolve(__dirname, 'dist') } }First vue/webpack app and there is no webpack.config file
I cannot seem to get my app to load css files properly and I thought it might have to do with the fact that my app seems to be using webpack, but there is no webpack.config.js file in the root.
I have webpack.base.conf.js and webpack.dev.conf.js and webpack.prod.conf.js but they are all in the ./build folder.
Is this wrong?
Rewrite jquery ajax request in axios and set xhrFields
i HAVE jquery request
$.ajax({ type: "GET", url: "http://6232423.212342343.100.89:9000/api/v2/content/categories/", xhrFields: { withCredentials: true }, });how do I make the same but in axios? I tried like this:
axios.get(portal.categoriesUrl, {xhrFields: { withCredentials: true }} )but didn't work
how to populate data in a dropdown menu chained together in vuejs?
Hello i am trying to create a dropdown menu in my form in which there are three fields college name , college city and college name. The problem is i am not able to chain the dropdown menu.It should be like if i choose a particular state the city dropdown menu should populate with the cities in that state and then college should get populated by the city.
My data is coming in a form of array:
[{college_city:bangalore college_name:psit college_state:karnatak},{college_city:Delhi college_name:LSR college_state:Delhi}]
How to optimize parameters binding from blade to Vue component's children?
having in blade a directive for a parent component like this:
<component v-bind:mydata="data" v-bind:basepathimg="{{config('base_path_images')}}" ></component>Which in turns loads multiple times its children like:
<div v-for="(c, index) in mydata"> <childcomponent v-bind:c="item" v-bind:basepathimg="basepathimg" ></childcomponent> </div> .... <script> export default{ props: ['mydata', 'basepathimg', ....], ....then finally in child component
<img :src="basepathimg" class="img-responsive"> <script> export default{ props: ['item', 'basepathimg', ....], ....Focus here is on "basepathimg" As you see it has to be passthrough blade parentcomponent ant then child component... but actually I don't need it in parent component.
Could I optimize this some way?
VueX state one step behind with dynamic routes (nuxt)
I am trying to update my state every route change by updating the 'activeCategory' of a post.
I am firing a VueX action every time the route changes. But the state is always one step behind, as it displays the category for the previous post not the current one.
I fire the action on mounted when the user initially hits the page and then fire the action every route change as i'm using dynamic routes.
Any help would be great! Thanks
highlight a drop area before drop image to upload vue js
I am working with laravel and vue 2. I want to highlight an drop-able area when select images for upload or drag the selected image just before drop the images. So far in my knowledge it can be done by dynamically add a class to change css for highlighting the area when drag the image on the area. But i don't know which event i should trigger when i drag the images to the area. or even better suggestion will be appreciable. any help please??
Veu.js: vue-alert component not rendering
I am sure that there is no problem with archer-vue-alert package, in fact I used vue-alert package as well. Same problem. Not sure why alert is never displayed.
Please suggest.
package.json
"archer-vue-alert": "^2.0.2", "onsenui": "^2.5.1", "vue": "^2.4.2", "vue-i18n": "^7.1.1", "vue-infinite-scroll": "^2.0.1", "vue-onsenui": "^2.1.0", "vue-resource": "^1.3.4", "vue-router": "^2.7.0", "vuex": "^2.3.1"Model and Computed Property interaction in Vue.js
Using vue.js I am trying to build a simple task manager.
When a user clicks the "complete" checkbox I want two things to happen:
- If the "Show all tasks" is unchecked, hide the task.
- Send an ajax request to the server to mark the task as complete/open.
The impotent parts are shown below:
<div id="tasks-app"> <input type="checkbox" id="checkbox" v-model="show_all"> <label for="checkbox">Show all tasks</label><br> <table class="table"> <tr><th v-for="column in table_columns" v-text="column"></th><tr> <tr v-for="row in visibleTasks" :class="{danger: !row.daily_task.complete && row.daily_task.delayed, success: row.daily_task.complete}"> <td v-text="row.task.name"></td> <td v-text="row.task.deadline"></td> <td v-text="row.daily_task.status"></td> <td v-text="row.daily_task.task_user"></td> <td> <input type="checkbox" v-on:change="updateStatus(row)" v-model="row.daily_task.complete" >Complete</input> </td> <td><input v-model="row.daily_task.delay_reason"></input></td> </table> </div>And the VUE.js code:
app = new Vue({ el: '#tasks-app', data: { table_columns: ['Task','Deadline','Status','User','Actions','Reason'], tasks: [], filter_string: '', show_all: false }, computed: { visibleTasks() { show_all = this.show_all if(show_all){ search_filter = this.tasks }else{ search_filter = _.filter(this.tasks,function(task){ return !task.daily_task.complete; }) } return search_filter } }, methods: { updateStatus(row){ var id = row.daily_task.id var complete = row.daily_task.complete if(complete){ axios.get('set_task_complete/' + id) }else{ axios.get('set_task_open/' + id) } } } })If the show all checkbox is checked, this works as expected. The data changes and then the updateStatus function is called.
If however the show all checkbox is unchecked, the visibleTasks will trigger and the logic for the updateStatus will fail, as the row will be hidden and the ID that is send to the server will be off by one. If the row hides before updateStatusis called the wrong row is passed to the updateStatus function.
I could solve this by adding a filter update at the end of updateStatus function but that does not seems to utilize the Vue.js library. Could someone help me what components of Vue you would use to solve this problem?
Why moment js not working in mounted vue component?
If I put moment on the method like this :
<template> ... </template> <script> export default{ ... methods:{ ... add(event){ let current = moment() } } } </script>If call the add method, it works. No error
But if I put moment on the mounted like this :
mounted(){ let currentAt = moment() }It does not work
There exist error like this :
[Vue warn]: Error in mounted hook: "ReferenceError: moment is not defined"
How can I solve it?
VueJs 2 emit custom event firing, but not being "heard"
Probably not possible, but I have an object that extends Vue/ VueComponent (tried both) that $emits a custom event that would normally be caught on its parent.
Please see this pen: https://codepen.io/anon/pen/MvmeQp?editors=0011 and watch the console.
class nonVueComponent extends Vue { constructor(age,...args){ super(args) console.log('new Blank Obj') setTimeout(() => { console.log('customEvent event does fire, but nothing hears it. Probably because it isnt in the DOM?', age) this.$emit('customEvent', `custom event from nonVueComponent...${age}`) },500) } } Vue.component('test', { template: `<div> {{content}} <child :childAge="age" @customEvent="customEvent"></child> <child-secondary @secondaryEvent="customEvent"></child-secondary> </div>`, props: {}, data () { return { content: 'hello from component!', age : 20 } }, methods : { customEvent(data){ console.log('PARENT: custom event triggered!', data) this.content = data }, secondaryEvent(data){ console.log('PARENT: !!secondary custom event triggered', data) this.content = data } } }) Vue.component('child',{ template: `<div>+- child {{childAge}}</div>`, props: ['childAge'], data () { outsideOfVue: new nonVueComponent(this.childAge) } }) Vue.component('child-secondary',{ template: `<div>+- secondary event</div>`, mounted(){ setTimeout( ()=>{ this.$emit('secondaryEvent', 'from secondary event....') },125 ) } }) let vm = new Vue({ el: '#app'})Aside from using an eventBus, is there any other way to get the event up and out from the <child> ? Maybe make the nonVueComponent a mixin?
Thanks.
how to generate name for v-model in vuetify
I have a list of item that i put in a data table and for each line i would like to generate a unique v-model name in my select field.
I'have tried to create an empty array first but it does not work.
this.role = []This is my select item :
<v-select v-bind:items="roleItems" label="Select Role User" v-model="this.role[props.item.id]"></v-select>Gulp task causing import of Promise from Babel to fail
I have a simple Gulp file I'm trying to use. For some reason when I run the following task (gulp test):
var gulp = require('gulp'); var mocha = require('gulp-mocha'); var util = require('gulp-util'); var getFiles = require('./src/functions/getFiles.js') var writeFiles = require('./src/functions/writeFiles.js') gulp.task('test', function () { return gulp.src(['test/**/*.js'], { read: false }) .pipe(mocha({ reporter: 'spec' })) .on('error', util.log); }); gulp.task('watch-test', function () { gulp.watch(['src/**'], ['test']); });I get this error:
(function (exports, require, module, __filename, __dirname) { import _Promise from 'babel-runtime/core-js/promise'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) at loader (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/Xadmin/production/Y-back/test/e2e/runner.js:3:14) at Module._compile (module.js:571:32) at loader (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/Xadmin/production/Y-back/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at /Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:230:27 at Array.forEach (native) at Mocha.loadFiles (/Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:227:14) at Mocha.run (/Users/Xadmin/production/Y-back/node_modules/mocha/lib/mocha.js:513:10) at Object.<anonymous> (/Users/Xadmin/production/Y-back/node_modules/mocha/bin/_mocha:480:18) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:427:7) at startup (bootstrap_node.js:151:9) at bootstrap_node.js:542:3 [09:42:16] { Error: Command failed: mocha /Users/Xadmin/production/Y-back/test/e2e/nightwatch.conf.js /Users/Xadmin/production/Y-back/test/e2e/runner.js /Users/Xadmin/production/Y-back/test/unit/index.js /Users/Xadmin/production/Y-back/test/unit/karma.conf.js /Users/Xadmin/production/Y-back/test/e2e/specs/test.js /Users/Xadmin/production/Y-back/test/e2e/custom-assertions/elementCount.js /Users/Xadmin/production/Y-back/test/unit/specs/FileAdder.spec.js /Users/Xadmin/production/Y-back/test/unit/specs/Hello.spec.js /Users/Xadmin/production/Y-back/test/unit/coverage/lcov-report/prettify.js /Users/Xadmin/production/Y-back/test/unit/coverage/lcov-report/sorter.js --colors --reporter=spec /Users/Xadmin/production/Y-back/build/dev-server.js:1I am using the standard (full) Vue Webpack template, so there should be no problem in importing Promises from Babel, as far as I know. Here is my package.json if it helps:
{ "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e" }, "dependencies": { "browserfs": "^1.4.2", "element-ui": "^1.4.1", "firebase": "^4.2.0", "fs": "0.0.1-security", "gulp": "^3.9.1", "gulp-mocha": "^4.3.1", "gulp-util": "^3.0.8", "mocha": "^3.5.0", "vue": "^2.3.3", "vue-awesome": "^2.3.1", "vuefire": "^1.4.3" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "webpack-bundle-analyzer": "^2.2.1", "cross-env": "^5.0.1", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "lolex": "^1.5.2", "mocha": "^3.2.0", "chai": "^3.5.0", "sinon": "^2.1.0", "sinon-chai": "^2.8.0", "inject-loader": "^3.0.0", "babel-plugin-istanbul": "^4.1.1", "phantomjs-prebuilt": "^2.1.14", "chromedriver": "^2.27.2", "cross-spawn": "^5.0.1", "nightwatch": "^0.9.12", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "url-loader": "^0.5.8", "vue-loader": "^12.1.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }Any ideas what could be causing this?
Vuejs + laravel: Wrong position of rendering
I have the following problem that doesn't make sense to me.
I have one file index.blade.php with the following code:
<!-- Vue component is rendered on this spot --> <table> <thead> <tr> <th>{{ __('Status') }}</th> <th>{{ __('From') }}</th> <th>{{ __('To') }}</th> <th colspan="3"></th> </tr> </thead> <list-of-available-dates></list-of-available-dates> </table>And the Vue component is like this:
<template><tbody> <tr v-for="date in dates" v-bind:class="{'is-grey': date.status.code == 2}" > <td>{{ date.status.label }}</td> <td>{{ date.start.date }}</td> <td>{{ date.end.date }}</td> <td>10 {{ 'options taken' }}</td> <td><a href="dates/10/options"></a></td> </tr> </tbody></template>It is rendered by:
Vue.component( 'list-of-available-dates', require('./components/frontend/Datelist.vue') );The Vue component is loaded with the right information and with the right template markup. But instead it is loaded on the spot where <list-of-available-dates> is rendered, it is rendered at top of the table. I have put a comment in the code to show where it is rendered.
Did I forget something? Why is it rendered at the top instead on the position of the component.
Build Vue Single File Component to plain js file
I have created a vue plugin using multiple .vue component files. I would like to be able to host this project onto a cdn with plain javascript access, but am not sure how to write such a build script.
I am currently thinking of something like
require('vue-loader!./node_modules/vue-loader') var lib = require('src/<my_file>.vue')
in a build.js file I run with node. However, I am not sure how to use vue-loader outside of the context of webpack. I understand that this is not vue-loader's main focus, but I would think that somewhere in the library is a function to actually convert the .vue file into a json object I could print.
What internal function can I call, or otherwise what other option do I have for this?