Software

I am struggling with webpack. I want to have the compiled files in public-cdn folder. However, the following code creates files in several different locations. Including E:\cdn. Chunks, app.js, css files - everything in different location.

Paths:

main folder: www/Project
laravel public: www/Project/public
cdn folder: www/Project/public-cdn

webpack.mix.js

mix.webpackConfig({ output : { path : '/public-cdn/', publicPath : 'http://cdn.ywg.localhost/', chunkFilename : 'js/[name].js' }, }); mix.sass('resources/assets/sass/styles.scss', '../public-cdn/css') .options({processCssUrls: false }); mix.sass('resources/assets/sass/invoice.scss', '../public-cdn/css') .options({processCssUrls: false }); mix.js('resources/assets/js/frontApps.js', '../public-cdn/js') .extract(['vue']);

I tried experimenting with Path and PublicPath parameters. PublicPath doesn't seem to work at all.

Overview In main.js, add

import Three from 'three'

Vue.use(Three)

Start dev server with npm run dev. Expected behavior The Vue project should load without errors. Actual behavior The dev server gives this warning:

warning in ./src/main.js 7:8-14 "export 'default' (imported as 'Three') was not found in 'three'

And the browser's js console displays the error:

Uncaught TypeError: Cannot read property 'installed' of undefined at Function.Vue.use (eval at <anonymous> (app.js:723), <anonymous>:3443:15) at eval (eval at <anonymous> (app.js:778), <anonymous>:14:45) at Object.<anonymous> (app.js:778) at __webpack_require__ (app.js:660) at fn (app.js:84) at Object.<anonymous> (app.js:964) at __webpack_require__ (app.js:660) at app.js:709 at app.js:712

I have a input field that gets pre populated from my DB, but I wont want it to be pre filled if the value is 0

Eg:

<input v-model="price" type="text">

If

data: { price: 0 }

I dont want my input field to display 0, I know that I can do stuff like :disabled="price == 0" but this will hide the whole inputfield, I just dont want to display the value if its 0

I'm trying to implements a transition between two elements containing CSS animations simply by following the documentation's example.

My HTML contains : A button to change my state :

<button @click="toggled = !toggled"> Toggle class ({{ toggled }}) </button>

The transition with the two loader (a red and a black one) :

<transition name="fade" mode="out-in"> <div class="loader" v-if="toggled" key="toggled"></div> <div class="loader red" v-else key="notToggled"></div> </transition>

It appears that the VueJS's transition is waiting for the animation to finish before displaying the next. Am I doing something wrong ?

Reproduce the issue : https://jsfiddle.net/f2vozp35/2/

I am binding an event to an element either using @click property in Vue (it behaves the same as javascript .onclick property).

The problem I have is when the event is called by propagating from the child DOM nodes click events I get the child DOM element as target property and I cannot find a way a clean way (without searching for the parents, as the element might me nested deep inside) to access the DOM element that the event was registered onto inside the event callback.

<td @click="onCellClick($event)"> <div class="text"> <span>default</span> </div> </td>

I want to add button on my page. When we click that button, above generates div where we can add photo. When we click twice, we have two divs etc. The problem is that my code is not generating... How I can achieve this?

And another question. How I can add +1 to identifier while adding another div?

<div v-for="row in rows" class="row"> <div v-model="test" class="col-3"> <photo :upload_url="" :parent="this" identifier="image01"></photo> </div> </div> <button type="button" class="button btn-primary" @click="addRow()">Add row</button> addRow() { this.rows.push({ test: "" <-- I DON'T KNOW WHAT TO DO HERE }); }

I am building a javascript web application using vue-cli.

I noticed there is some const keywords in the compiled javascript code. And the browser said SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode

The compiled code looks like:

"use strict"; eval("/*blabla*/ const xxx ...");

My babelrc:

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }

The babel-loader configuration file is like:

{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] },

Is there a best practice or de-facto library for Vue.js when it comes to mapping JSON API responses to "real" javascript Model objects? Coming from iOS Development, there are excellent libraries like JSONModel and MagicalRecord dealing with exactly this matter.

Most Vue.js tutorials/examples I could find just seem to work with the plain JSON responses. IMHO, this gets cumbersome real quick. For instance, when dealing with raw data like date strings which would be better of as real Date objects. So it involves some sort of (de)serialization functionality. Also, it'd be nice to have stuff like Foo.findAll(), Foo.findById(1) or foo.save() to create appropriate calls to the backend service.

I found vue-model which looks promising, but it doesn't seem to have a lot of traction. This makes me wonder, if mapping JSON to objects is just not something a lot of people do in their SPAs? What are alternative approaches?

I want to use a filter to perform translations.
Problem is that 'this' doesn't point to my vue instance inside my filter function.

This is what I currently have.

inside my template I have this:

<p>{{ parking.status | translate }} </p>

inside my component I have this:

new Vue({ ... filters: { translate: function(value, vue) { return this.$i18n.t('MLAA-47'); }

The error I get is that this == undefined.
How do i point it to my vue instance inside my filter function ?

They both seem to do the same thing, and I can't tell when to use which

so i have this setup, i have my component called dataviewer.vue that use to show table

<template> <table class="table"> <thead class="bg-primary"> <tr> <th v-for="item in thead"> <span>{{item.title}}</span> </th> </tr> </thead> <tbody> <slot v-for="item in model.data" :item="item"></slot> </tbody> </table> </template> <script> import Vue from 'vue' import axios from 'axios' export default { props: ['source', 'thead'], data() { return { model: { data: [] }, } }, beforeMount() { this.fetchData() }, methods: { fetchData() { var vm = this axios.get(this.source) .then(function(response) { Vue.set(vm.$data, 'model', response.data.model) }) .catch(function(error) { console.log(error) }) } } } </script>

and then i just call this component in my article index.vue file

<div class="page-container"> <div class="page-content"> <div class="content-wrapper"> <data-viewer :source="source" :thead="thead"> <template scope="props"> <tr> <td>{{props.item.name}}</td> <td>{{props.item.creator}}</td> <td> <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i> <i class="icon-cancel-circle2" v-else></i> {{props.item.publish}} //for testing purpose to see returned value </td> <td>{{props.item.created_at}}</td> </tr> </template> </data-viewer> </div> </div> </div> <script type="text/javascript"> import DataViewer from '../../components/dataviewer.vue' export default{ components:{ DataViewer }, data(){ return{ source: '/api/article', thead: [ {title: 'Name', key: 'name', sort: true}, {title: 'Creator', key: 'creator_id', sort: true}, {title: 'Publish', key: 'publish', sort: true}, {title: 'Created', key: 'created_at', sort: true} ], } } } </script>

as you can see in my article index.vue file inside <template scope="props"> i then write my html for showing table row. And there is one column (props.item.publish) where i don't want to just show raw data from database but do some condition where v-if="props.item.publish === '0'" then i will render some checklist icon and otherwise if it is not then it will render cancel icon

<td> <i class="icon-checkmark5" v-if="props.item.publish === '0'"></i> <i class="icon-cancel-circle2" v-else></i> {{props.item.publish}} //for testing purpose to see returned value </td>

but when i run it, it just render cancel icon for all rows... so my question is how to do v-if inside it? i also thinking doing computed property but i can't get access props.item.publish from script

when i type this($vm0.$children.forEach(tab => console.log(tab.name)); in console getting undefined iam just learning vuejs and creating components. my html file is here

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css"> <style type="text/css">body {padding-top:40px; }</style> </head> <body> <div id="root" class="container"> <tabs> <tab name="About Us" :selected="true"> <h1>Here is the content for About us tab.</h1> </tab> <tab name="About Our Culture"> <h1>Here is the content for cukture tab.</h1> </tab> <tab name="Contact tab"> <h1>Here is the content for contact us tab</h1> </tab> </tabs> </div> <script src="js/11.js"></script> </body> </html>

my js code is here

Vue.component('tabs', { template: ` <div> <div class="tabs"> <ul> <li class="is-active"><a>Pictures</a></li> <li><a>Music</a></li> <li><a>Videos</a></li> <li><a>Documents</a></li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> `, mounted() { console.log(this.$children); }

}); Vue.component('tab',{ template: <div><slot></slot></div> , props: { name: { required : true } } }) new Vue({

el: "#root"

})

I just begun Vue.js and I have some issues with it :

I’m currently working with Laravel, a PHP framework.

I would like to do a select list for a research, i have different applications but there are all related to different countries. And when I select a country I would like that only apps with this country appear.

I used to use php but we have to reload the page each time and it’s not very quick and easy to use.

My main page is like that :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>VueJS</title> <link rel="stylesheet" href=""> <script src="/js/vue.js"></script> </head> <body> <div id="app"> <div id="country"> <select v-model="selectedcountry"> <option v-for="option in options" v-bind:value="option.value">@{{ option.text }} </option> </select> <span>Sélectionné : @{{ selectedcountry }}</span> </div> <script src="/js/app.js"></script> </body> </html>'

And my app.js :

new Vue({ el: '#country', data: { selectedcountry: 'All Countries', options: [ { text: 'All Countries', value: 'world' }, { text: 'Denmark', value: 'denmark' }, { text: 'France', value: 'france' }, ] } })'

And in my database my table is : "cards" with an attribute call "country".

How can i do that ?

Thank for you any ideas or solutions :slight_smile:

i just wanna create dynamic registered module in vuex, but it seems doesnt work. this is my store file

import Vuex from 'vuex' import descriptionModule from './module/descriptionModule'; const {state: stateModule, getters, mutations} = descriptionModule; const createStore = () => { return new Vuex.Store({ state: { descriptions: [], }, mutations: { addDescriptions(state, payload){ state.descriptions.push(state.descriptions.length + 1); createStore().registerModule(`descriptionModule${payload}`, { state: stateModule, getters, mutations, namespaced: true // making our module reusable }); } } }) }; export default createStore

and this is my custom module that i will registered

const state = () => { return {description: ''} }; const getters = { description: (state) => state.description }; const mutations = { updateDescription(state, payloads){ state.description = payloads; } }; export default { state,getters,mutations }

and then this is my custom methods that will call addDescriptions mutation and commit updateDescription from registeredModule

beforeMount(){ console.log("hahahaha"); this.$store.commit('addDescriptions', this.id); }, ... more code .... methods: { onType(editor, content){ console.log(this.$store.state.a); console.log(this.$store.state); console.log(this.$store); this.$store.commit(`descriptionModule${this.id}/updateDescription`, content, {root: true}) } }

every onType called, i get an error unknown mutation type: descriptionModuleeditor1/updateDescription in browser.

currently iam following this solution link , but it doesnt work for me :(

can anyone solve this,,, sorry for bad english

I'm integrating a small vue app inside a jquery mobile site. What's happening: i'm going for the first time inside the site on the URL of the page that cointains the vue app. Then i scroll and I get the console.log saying "scroll".

If i go to another page and come back to the page containing the vue app OR if i enter the site with a URL to another page and I go to the page with the vue app, I get the console.log saying "applyEvents" but when I scroll I get nothing

// app.js methods: { scroll(){ console.log("scroll") }, applyEvents(){ console.log("applyEvents") jQuery(window).on('scroll', this.scroll); } }, mounted(){ this.applyEvents() }, beforeDestroy(){ console.log("beforeDestroy") jQuery(window).off('scroll', this.scroll); } // main.js jQuery(document).ready(() => { var vueFeed = null; jQuery(window).on("pagebeforehide", (event) => { if(vueFeed){ console.log("destroying") vueFeed.$destroy() } }) jQuery(window).on("pageshow", (event) => { if(jQuery.mobile.activePage.attr('id') == "page-dashboard"){ vueFeed = new Vue({ el: '#feed', template: '<App/>', components: { App } }) } }) })

// edit If i go from the console and do $vm.applyEvents() i get the console.log saying "applyEvents" and the scroll works

I have been having the most stressful time making this progress bar into a circle progress bar. I've tried using progressbar.js but that isn't helping me.

html

<div id="myProgress"> <div id="myBar" v-bind:style="{width: activewidth}">{{activewidth}} done</div> </div> <br>

js

moveBar: function () { let numLessons = 1 for (let i = 0; i < this.opts.lessonsArr.length; i++) { numLessons++ } // this.numComp is the percentage of the bar this.numComp = (numLessons % 5).toString() console.log('numLeft', this.numComp) // this.activewidth determines the % completed, so the green bar this.activewidth = (this.numComp * 20 + '%').toString() console.log('thiswidth', this.activewidth) }

css

#myProgress { width: 95%; background-color: grey; margin-left: auto; margin-right: auto; } #myBar { width: 30%; height: 20px; background-color: #2ecc71; text-align: center; /* To center it horizontally (if you want) */ line-height: 20px; /* To center it vertically */ color: white; }

what i have now: image of progress bar

this is in vuejs, and in a big project :( please help me do this in pure css (if possible)

I am new to vuejs, While writing one js code inside laravel framework, I am getting error :

[Vue warn]: Unknown custom element: <app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

App.js

import Vue from 'vue' import Vcinfo from './Vcinfo.vue' import router from './router' const app = new Vue({ el: '#vcinfo', components: { Vcinfo }, template: '<app></app>', router })

please suggest what to do?

I am using vee-validate to validate the register form and i have made the code as follows,

<form @submit.prevent="signUp()"> <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" > <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" class="form-control" type="number" placeholder="Mobile Number"> </div> <div class="form-group" :class="{'has-error': errors.has('register.email') }" > <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email"> </div> <div class="form-group" :class="{'has-error': errors.has('register.password') }" > <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password"> </div> <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" > <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password"> </div> <div class="modal-footer btn-center"> <button type="submit" class="btn btn-default">Sign Up</button> </div> </form>

And the script was:

export default { data() { return { register: { mobile_number: '', email: '', password: '', confirm_password: '', }, } }, methods: { signUp() { this.$validator.validateAll().then((result) => { }); axios.post(config.apiDomain+'/Home',this.register).then(response=>{ }); } }, }

And also imported vee-validate in main.js as,

import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);

But if we enter anything inside the input box, it is throwing error as

Uncaught Error: [vee-validate] No such validator '12312321' exists.

Whatever thing i enter inside any of the input box, it is showing the same error. Kindly help me to resolve this issue.

I'm trying to use vue-i18n inside of functional component. How would that be included? I'm using most recent Vue 2.x and vue-i18n 7.x Thanks

I am pretty new to vue-cli, I am developing an app with electron and vue. I am using vue-cli and everything is working fine. But one of my requirements is too use lokijs to persist my data.

I have managed to import lokijs to my component but i would like it to be globally, also i want to save de lokijs db to a local file.

Do you have any hints for this requirements?

Here is my partial code:

<template> <div class="home-page"> <h1 class="title">{{ title }}</h1> <h2>{{ counter }}</h2> <icon class="beer-icon" name="beer"></icon> <button v-on:click="createDB()">Add 1</button> </div> </template> <script> import Loki from 'lokijs' export default { name: 'homePage', data () { return { title: 'Home Page', counter: 1 } }, created () { // alert('created') }, methods: { createDB () { let db = new Loki('example.db') var children = db.addCollection('children') // Insert a document: children.insert({ name: 'Sleipnir', legs: 8 }) let a = children.get(1) alert(a.name) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> </style>

Hope my question is clear.