Software

I briefly looked at the documentation on Vue Unit Testing

It said:

Anything compatible with a module-based build system will work

The documentation describes ways to test components

In my case I am not using a component. I am adding the vue.js to the page and I create a new Vue Instance.

new Vue({ el: '#app', data: { .... } });

main.js has this code

window.l = function () { } try { window.l = console.log.bind(console) } catch (e) { }

which works in non-Vue apps. However, when calling

l("test")

from a Vue action/method, it complains it isn't defined.

How can that work?

Reasoning: need to output some debugging data, with as less typing as possible.

Iam learning vuejs, i have hundreds of json file i want to load in to my Vue project , in my script, Simply i can do this loading all json files directly in main file as below

//Index.vue <script> import data1 from 'assets/json/data1.json'; import data2 from 'assets/json/data2.json'; ...

above works fine, but now im planning to keep all imports into different file as below

//assets/imports.js import data1 from 'assets/json/data1.json'; import data2 from 'assets/json/data2.json';

and refer imports.js as

//Index.vue <script> import alldata from 'assets/imports'

is it possible to do like this, in not good in webpack too

I have created a Vue component which contains a table from element-ui library. In a created() lifecycle hook, I am requesting table data and assigning the response as a table data.

What I need is to call a function after rows are rendered in a DOM. I have tried 3 approaches ...

1) nextTick() ... works bad

created() { this.isLoading = true; // Get all rows DataProvider.GetRows().then((returnedRowsData) => { this.tableData = returnedRowsData; this.isLoading = false; Vue.nextTick(() => { this.needToCallThisAfterTableDomIsCreated(); }); }); }

2) mounted() lifecycle hook - works bad

mounted() { this.needToCallThisAfterTableDomIsCreated(); }

3) Interval delay - this works, but is is not called immediately after table dom is rendered

created() { this.isLoading = true; // Get all rows DataProvider.GetRows().then((returnedRowsData) => { this.tableData = returnedRowsData; this.isLoading = false; setTimeout(() => { this.needToCallThisAfterTableDomIsCreated(); }, 2000); }); }

I have an application with two sibling components:

I would like, upon a specific action in Component1 to trigger a method in Component2. Is there a way to do this directly?

Currently, I use an over-engineered solution:

• upon the specific change in Component1, it $emit a signal to the parent
• ... who, through a handler, modifies a flag in its data
• ... which is passed as prop to Component2
• ... which watch this prop and triggers the appropriate method upon chnage.

This composition of flags, handlers and watchers is too complex so i am hoping for a more direct solution.

In my vue project,I used vue-devtools. But when I clicked the 'vue' button,these is an error in console.I haven't any clue yet ,so I need some clue or solution, Please help me,Thank you very much if you can give me some help.

enter image description here

enter image description here.png

So I successfully configure webpack for loading scss style that is in my components. I use a <style lang="scss"></style> and it goes well.
But I would need to call some of my scss variables from there, so I guess I would need a kind of preload?

Is there a way to do it without having to @import in each component?

I know that the default behaviour of a object when we create new atributes for the same instance is that it reference the old, changing the properties.

I have something like this on my vue data:

export default { data() { return { paragraph: { text: "", fontSize: 14, key: "Paragraph", align: "left" } } }, methods: { addParagraph() { this.$set(this.paragraph, 'key', this.paragraph.key); this.$set(this.paragraph, 'text', this.paragraph.text); this.$set(this.paragraph, 'fontSize', this.paragraph.fontSize); this.$set(this.paragraph, 'align', this.paragraph.align); this.$store.commit("appendToDocument", this.paragraph) }, alignment(option) { this.paragraph.align = option; } }

everytime i click a button the data inside the paragraph changes and i want to pas the data to vuex store to add it to a json, so i can have a tree of paragraphs, the problem is, that everttime i create a new paragrapg it changes the values of my other paragraphs created before, is there a way to change it?

Ok, so I'm not being able to comprehend what value "webpack" gives in conext of Vue CLI.

I just installed vue cli globally.

then I made a directory manually and created a c1.vue file in it. With the template, script and style tags and related code.

and i compiled it using the command vue build --prod --lib c1.vue and it produced a c1.css and a c1.js file(s).

I simply add these files to my custom index.html file and use vue using a cdn and everything works !

So what's the point of webpack ?

I have a functionality (getAllData which does an external data query) which I need to call at two occasions: when the component is mounted and when a prop changes.

I am however getting a TypeError: this.getAllData is not a function when using it in a watch and in mounted.

Since methods can be called from methods, I am wondering whether this is true for methods being called from components such as watch or mounted.

My (simplified) instance is below:

export default { props: ['triggerReload'], data: function () { return { // some variables } }, watch: { triggerReload: this.getAllData() }, methods: { getAllData: function () { // this function correctly fetches external data } }, mounted: this.getAllData() }

My workaround will be to either duplicate the code of the function (which is not DRY) or to call an external function (defined outside the Vue instance - which is probably also an anti-pattern) EDIT: this is a component so I do not know how to call an external function and reference the instance (it is not instantiated by var vm = new Vue(...))

I have declared saveral variables in .d.ts files. It works right when running pack or build commands. But when I run unit test cases, things go wrong.

framework: vue+typescript+webpack

test runner: karma

I assume the problem is including .d.ts files is src, and I tried to exclude them. below is my regexp:

/\.\/(?!main\.ts)(?!((\S*\.d\.ts)|(\S*\.scss))$)/

tested already, seems it doesn't work. keep throwing these exceptions. drvies me crazy.

files in karma.conf.js

exceptions

anyone knows how to solve this issue?

For instance, I have a component looks like this.

<template> <div id="app"> <button class="my-btn" @click="increment">{{ val }}</button> </div> </template> <script> export default { data: { return { val: 1, }; }, methods: { increment() { fetch('/echo/html/').then((response) => { this.val++; }).catch((error) => { console.log(error); }); }, }, } </script>

You can also check this fiddle as a simplified demo

In order to do unit test for this component, I wrote code like this.

// Jest used here test('should work', () => { // wrapper was generated by using avoriaz's mount API // `val` was 1 when mounted. expect(wrapper.data().val).toBe(1); // trigger click event for testing wrapper.find('.my-btn')[0].trigger('click'); // `val` should be 2 when the button clicked. // But how can I force jest to wait until `val` was set? expect(wrapper.data().val).toBe(2); });

It didn't work since expect ran before fetch's done, but I've no idea how to let jest wait until promise function done.
So how can I test in this use case?

I am new to Vue.js. I am trying to create a simple login form, that will submit the values to a ASP.net Web API. When I click the submit button, I do not see the form data under POST. I am using Fiddler to check the POST data, which shows nothing under "WebForms" tab. On the ASP.net Web API the form object is shown as null. (For the sake of simplicity, I am passing hard code value to the post fields)

Following is the HTML inside login.vue

<template> <v-ons-page> <v-ons-toolbar> <div class="center">Log in </div> </v-ons-toolbar> <p style="text-align: center"> <img src="../assets/Image logo transparent.png" /> </p> <p style="text-align: center"> <v-ons-input modifier="underbar" placeholder="Username" type="text" v-model="user.name" float></v-ons-input> </p> <p style="text-align: center"> <v-ons-input modifier="underbar" type="password" placeholder="Password" v-model="user.password" float></v-ons-input> </p> <p style="text-align: center"> <v-ons-button @click="login($event)"> <div>Log in</div> </v-ons-button> </p> </v-ons-page> </template>

Following is the section where POST happens through axios

<script> import axios from 'axios' export default { name: 'login', data: { username: '', password: '' }, computed: { user: { get () { return this.$store.state.user } } }, methods: { login (event) { axios.post('http://localhost:54977/api/Roles', { username: 'Fred', password: 'Flintstone'}) .then(response => { this.$ons.notification.alert('Logeed in. Hurrey!!') }) .catch(e => { this.$ons.notification.alert('No donut for you. :(') this.errors.push(e) }) } } } </script>

The file I want to import has this location: src/assets/css/global.styl.

I import it into vue files like this:

src/App.vue

<style lang="stylus"> @import './assets/css/global'

I recently installed Storybook for Vue. I'm trying to import global.styl into the index.js file of Storybook for Vue:

src/stories/index.js

import '../assets/css/global.styl' // this works wine

However, I get this error:

ERROR in ./src/assets/css/global.styl Module not found: Error: Can't resolve './assets/img/buttons/radio-selected.svg' in 'E:\alex\vreditor\src\assets\css' @ ./src/assets/css/global.styl 7:12959-13009 @ ./src/stories/index.js @ ./.storybook/config.js @ multi ./~/@storybook/vue/dist/server/config/polyfills.js ./~/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

Why is this? and how to solve it?

NOTE: Seems like global.styl is being correctly imported. The problem are the relative paths inside the file:

input[type="radio"]:checked + label { &::before { background-image: url('./assets/img/buttons/radio-selected.svg') // Storybook can't find this. } }

My vue component like this :

<template> <span class="rating"> ... </span> </template> <script> export default { props: { 'star': null }, ... } </script>

If the component is running I want to disable button back in the browser. So the user can not go back to the previous page

How can I do it?

I have a webpack config that is based off https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js It uses vue-loader and babel-loader. The issue is I cannot get it to generate ES5 code so that it will work in the most broad range of clients.

If I use the ES2015 preset, webpack.optimize.UglifyJsPlugin fails to minify the output because Uglify can only handle ES5 (not counting the harmony branch). The errors are similar to: Unexpected token: punc (() and occur in multiple files.

I can work around this by using babili-webpack-plugin which will minify the ES6 code but is very slow. However, when I deploy this code, I see errors being reported back saying Block-scoped declarations (let, const, function, class) not yet supported outside strict mode so I know they are older clients choking on ES6 code.

How can I get proper ES5 code output from babel-loader? I have tried multiple presets, with or without the transform-runtime plugin. Config below:

const webpack = require('webpack'); const globEntries = require('webpack-glob-entries'); const _ = require('lodash'); const path = require('path'); const BabiliPlugin = require("babili-webpack-plugin"); const env = process.env.NODE_ENV; let entries; if (env === 'production') { entries = globEntries('./src/**/vue/*.js'); } else { entries = _.mapValues(globEntries('./src/**/vue/*.js'), entry => [entry, 'webpack-hot-middleware/client?reload=true']); } module.exports = { entry: entries, output: { path: '/', ///no real path is required, just pass "/" publicPath: '/vue', filename: '[name].js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader', sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', }, // other vue-loader options go here }, }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', query: { presets: ['es2015'], plugins: ['transform-runtime'], }, }, }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]', }, }, ], }, resolve: { alias: { vue$: 'vue/dist/vue.esm.js', }, }, plugins: [ new webpack.HotModuleReplacementPlugin(), // Enable HMR new webpack.NoEmitOnErrorsPlugin(), ], performance: { hints: false, }, devtool: '#eval-source-map', }; if (env === 'staging' || env === 'production') { //module.exports.devtool = env === 'staging' ? '#source-map' : false; module.exports.devtool = '#source-map'; module.exports.output.path = path.resolve(__dirname, './src/v1/parse/cloud/public/vue'); // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: `"${env}"`, }, }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false, }, }), // new BabiliPlugin(), new webpack.LoaderOptionsPlugin({ minimize: true, }), ]); }

When new bars value are set, the data is not updated. Please check below;

I'm planning to do dynamic bars and buttons. Once the buttons are clicked, the new values will be updated to bars values.

Here is the link

HTML

<h1><span>Vue.js</span> Progress Bar</h1> <div id="app"> <div v-for="(index, bar) in bars" class="shell"> <div class="bar" :style="{ width: bar + '%' }" .> <span>{{ bar }}%</span> <input type="radio" id="radio-bar" value="{{ index }}" v-model="picked" v-on:change="set(index)"> </div> </div> <span v-for="(index, button) in buttons"> <button value="{{ button }}" @click.prevent="makeProgress(button)">{{ button }}</button> </span> <br> <p>Selected Bar: {{ picked }}</p> <p>Button Value: {{ buttonVal }}</p> </div>

JS

var dataURL = 'http://pb-api.herokuapp.com/bars'; var vm = new Vue({ el: "#app", data: { maxColor: "#F22613", bars: [], buttons: [], limit: 0, selectedBar: 0, buttonVal: 0 }, methods: { fetchData: function(params) { this.$http.get(dataURL, function(data) { this.$set('bars', data.bars); this.$set('buttons', data.buttons); this.$set('limit', data.limit); console.log(params); }); }, set: function(index) { this.selectedBar = index; }, makeProgress: function(button) { var self = this; self.buttonVal += button; this.reachMax(); Vue.set(this.bars, 0, 55); }, reachMax() { if(this.buttonVal >= this.limit){ alert('Reached Limit' + this.limit) } } }, created: function() { this.fetchData(); } });

Right now I use axios like this:

import axios from 'axios' axios.get(apiObjUrl, { headers: { 'Content-type': 'application/x-www-form-urlencoded', } }) .then(({data}) => {

How do I set global axios header? (I need to set localization header to use in all my requests)

Many laravel/vue tutorials use ajax calls to get the data. It seems that the SPA is completely isolated from Laravel. I.e. Laravel is just a data API and the vue app could also simply be hosted on a third party external server (e.g. AWS S3). Is this the recommended way, or should I rather use Laravel for Routing and have separate views that implement individual components and already included data instead of using a SPA?

Here's my component.

<template> <v-ons-page> <v-ons-tabbar :visible="true" :tabs="tabs" position="top"> </v-ons-tabbar> </v-ons-page> </template> <template id="pendingPage"> <v-ons-page> <p>pending items</p> </v-ons-page> </template> <template id="completedPage"> <v-ons-page> <p>completed items</p> </v-ons-page> </template> <script> import Vue from 'vue'; const pendingPage = { template: '#pendingPage' }; const completedPage = { template: '#completedPage' }; export default { data() { return { activeIndex: 0, tabs: [ { label: 'Pending', page: pendingPage }, { label: 'Completed', page: completedPage } ] }; } }; </script>

Expected: I expect my component to render two tabs - Pending & Completed.

Problem: It only renders completedPage.

What I am doing wrong here?