Software

I have a parent where I can dynamically add child components into.

When child component is added in mount I register a listener for an event

EventBus.$on('content-type-saving', function() { logic here... }

Problem is when that component is deleted in the parent by removing it from the array of child components, that even still fires and code inside of it is run.

How can I prevent this from happening? I tried this

beforeDestroy() { //do something before destroying vue instance EventBus.$off('content-type-saving') }

but that turned off that event for all other child components as well so those that were still live would not do logic stuff anymore because I turned off event in destroyed child component.

I thought if I turned off an event it would only affect listening for that event for that child component and not turn the event for all child components.

How can I stop destroyed components from reacting on events?

I have an input inside a popover content like so:

JSFiddle

HTML:

<div id="vue-app"> <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'> Click Me! </div> <hr> <input v-model="message"> {{ message }} </div>

And here is JS :

new Vue({ el: '#vue-app', data: { message: 'I am a Text' } }); $(document).ready(function() { $('[data-toggle="popover"]').popover(); });

As you can see the input out of data-content binds well, but the one inside doesn't bind!

Any idea would be great appreciated.

i am using VUE.js 2

this is my DOM:

<aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>

and this is my script:

export default { data() { return {} }, methods: { height () { return this.$refs.userPanelMainContents ? this.$refs.userPanelMainContents.offsetHeight + 'px' : '0px' } } }

i want to get userPanelMainContents height and asign it to aside tag. how can i do that ?!!!

as I am new to node and bable and vue I cannot figure out where to search for that issue. the webpack command does not throw any errors.

• Is it a problem, that I am using the wrong ES? How can I find that out and change?
• did I miss a step or configuration? Or is the config breaking itself?
• did I wrongly include the language module in my main file?

My .bablerc

{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] }

My package.json

{ "name": "myapp", "version": "0.0.1", "description": "My app", "dependencies": { "bootstrap": "^3.3.7", "vue": "^2.4.2", "vue-multilanguage": "^2.1.1" }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.25.0", "babel-loader": "^6.4.1", "babel-plugin-transform-runtime": "^6.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.1.2", "babel-runtime": "^5.8.0", "webpack": "^1.15.0" }, "author": "You" }

My webpack.config.js

module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'build.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ } ] } }

and the error and the code where it hits in the build.js in Chromium: Uncaught SyntaxError: Unexpected token export in Firefox:

SyntaxError: export declarations may only appear at top level of a module export default MultiLanguage

Here also the vue code (main.js):

import Vue from 'vue/dist/vue.js' import MultiLanguage from 'vue-multilanguage/src/vue-multilanguage.js' Vue.use(MultiLanguage, { default: 'en', en: { hi: 'Hello', welcome: 'Welcome, {name}' }, pt: { hi: 'Ola', welcome: 'Bem-vindo, {name}' } })

Sorry for the long posting, but I am quite stuck. I read already much about issues about not installed components, and checked twice if I have them all, and feeling that I have installed all. I read about bable and webpack, but it is huuuge and to heavy to find out where to start the debugging.

any recommanded tutorials? any idea?

Suppose I had this code

<main> <form> <input type="text" v-model="name"> <button type="submit" @click="submit"> Submit From Vue Property </button> </form> </main>

And this the Vue code.

new Vue({ el : 'main', data : { name : '' }, methods : { submit(){ } } })

how to submit to server from Vue data property instead? That i used in submit method.

( honestly, my actual code is much complicated but the problem is same. How to submit Vue data property instead? )

I would like to ask experts about the right “VueJS” way to implement SVG schema based on data (data-driven).

I have two totally different proof-of-concepts. The first one uses array’s methods and the second one uses bus.$on / bus.$emit method

So, I would like to hear from you what case is the right -or- is there better solution than my?

1st: http://play.ionic.io/app/e7c1d50192561 2nd: http://play.ionic.io/app/7e86491958061

If you need to play with it, please first fork the playground in the upper right corner - link “fork”.

Thanks

The code below has a div which "moves" between two container div when clicked

new Vue({ el: "#container", data: { left: true } }) #container { width: 500px; display: flex; justify-content: space-between; } #left { width: 100px; background-color: red; } #right { width: 100px; background-color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="container"> <div id="left"> <div id="element" v-if="left" v-on:click="left=!left">element</div> </div> <div id="right"> <div id="element" v-if="!left" v-on:click="left=!left">element</div> </div> </div>

Is there a concept of path when such an element (with the sameid) changes its location in the rendered DOM? If so: is there a way to visualize its transition from one place to another (via a slide on this path)?

I am using Vue's aysnc components with the following code:

Vue.component( 'async-webpack-example', () => import('./my-async-component') )

It builds fine and webpack manages to create 2.bundle.js

Unfortunately, when loading the file, it looks for 2.bundle.js in the root (http://example.com/2.bundle.js) and not in http://example.com/js/2.bundle.js where it resides.

Do I need a webpack directive to fix this? If so, what kind of directive do I need? Thanks! :)

I'm new to vue, I'm trying to learn more about it using laravel mix in laravel 5.4, but I got this error in my browser:

app.js:39 Uncaught ReferenceError: msg is not defined at Ut.eval (eval at ei (app.js:40), <anonymous>:2:261) at Ut.t._render (app.js:39) at Ut.<anonymous> (app.js:39) at io.get (app.js:40) at new io (app.js:40) at Ut.Ct.t._mount (app.js:39) at Ut.$mount (app.js:41) at Ut.$mount (app.js:41) at Ut.Mt.t._init (app.js:39) at new Ut (app.js:39)

I'm defining my "msg" in my ressources/assests/js/app.js Here's my app.js:

require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app', data: { msg: 'a msg' } });

Here's my messages.blade.php

@extends('layouts.app') @section('content') <div class="col-md-12"> <div class="col-md-3 left-sidebar" style="background-color:#fff;"> <h3 align="center"> <div id="app">@{{msg}}</div> </h3> <hr> </div> </div> @endsection

I don't know where the problem might be since I'm new to this, and it's just a simple application. Thanks for helping!

I'm trying to create menu with Vue, but my menu isn't showing up. Here is what i try

<div id="app" class="container"> <b-menu v-for="menu in menu_items" v-bind:data="menu.menu_list" v-bind:key="menu.menu_list"> <label>{{ menu.menu_list }} </label> <b-menu-list v-for="menu_item in menu_items.menu_list" v-bind:data="menu_item" v-bind:key="menu_item.message"> <b-menu-item > {{ menu.message }}</b-menu-item> </b-menu-list> </b-menu> </div>

and here is my vue

var App = new Vue({ el: '#app', data: { menu_items: [{ menu_list : 'General' [ { message: 'First Menu' }, { message: 'Second Menu' } ], menu_list : 'Setting' [ { message: 'First Setting Menu' }, { message: 'Second Setting Menu' } ] }] } })

Any solution(s) ? sorry for the short question, my english is not good. thanks

this is my simple component:

<template> <div class="input-group colorpicker-component"> <input type="text" v-model="value" class="form-control"/> <span class="input-group-addon"><i></i></span> </div> </template> <script> export default { props: { value: {type: String}, }, data() { return { } }, mounted: function() { var self = this $(self.$el).colorpicker() }, beforeDestroy: function() { $(this.$el).colorpicker('hide').colorpicker('destroy') } } </script>

It gets initiated like this:

<color-picker v-model="imageBackground"></color-picker>

How do I get back color that I have picked inside of component back to parent? This component can be used many times in parent.

How can I keep the parent updated with value picked in color-picker component?

I found a nice SSR (server side rendering) boilerplate with Vue in here : https://github.com/csbun/vue2-ssr-example, right now it can only render pre-defined path from Express

and I need to associate the url path with state it generates, like on this example,

It's already successfully fetch the data API,

But still I couldn't make it to work displaying state change to url. Moreover, the project is complex with Vuex as state manager.

I am a newbie of vue2. I want to know which is better in below solutions, They get the same result, and why is better.

the first use computed VS the second use v-if, thanks for everyone who watch this question.

Hi im trying to learn VueJs

I have 4 buttons with a color, and i try to change the background color of a div according to the button clicked. I'm having trouble reading the data-color object of the button and use it in vue, how do i do this?

My code:

<div id="app"> <div class="container"> <div class="row"> <div class="col-md-3"> <button class="center-block" @click="changeColor" data-color="green">Green</button> </div> <div class="col-md-3"> <button class="center-block" @click="changeColor" data-color="blue">Blue</button> </div> <div class="col-md-3"> <button class="center-block" @click="changeColor" data-color="yellow">Yellow</button> </div> <div class="col-md-3"> <button class="center-block" @click="changeColor" data-color="red">Red</button> </div> </div> <div class="row"> <div class="col-md-12"> <div class="colorblock center-block"> </div> </div> </div> </div> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#app', methods: { changeColor: function() { // Things i tried // console.log(this.data-color); // console.log(this[data-color]); } } }); </script>

I'm having a hard time understanding how this works in Vue... Also how do i target .colorblock and change it's css?

Thanks in advance

i recently learning about vue

I have this file main.js

import Vue from 'vue/dist/vue.js' import Buefy from 'buefy' import 'buefy/lib/buefy.css' Vue.use(Buefy) var App = new Vue({ el: '#app', data: { message : "It's working" } })

and here is my html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Example</title> </head> <body> <h3 id="app">{{ message }}</h3> <script src="dist/build.js"></script> <script> </script> </body> </html>

It's working. But, now i'm trying to do something with my script. I change main.js (I'm using webpack)

import Vue from 'vue/dist/vue.js' import Buefy from 'buefy' import 'buefy/lib/buefy.css' Vue.use(Buefy)

then my index.html to this

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Example</title> </head> <body> <h3 id="app">{{ message }}</h3> <script src="dist/build.js"></script> <script> var App = new Vue({ el: '#app', data: { message:"It's not working" } }) </script> </body> </html>

and i get this error

Uncaught ReferenceError: Vue is not defined

How can i fix this ?

I have an array of quotes in my parent template which I pass to a child component as a prop. I then take that array and create another child component for each index in the array by passing it through a for loop into a slot. This all seems to work fine.

The problem is that I am trying to delete each index of the array on clicking it's element, but whenever I click an element the first index is deleted, not the index linked to the element clicked.

In the following component I execute method @click and run the method deleteQuote passing the related index.

<template> <div class="panel-body" @click="deleteQuote"> <slot></slot> </div> </template> <script type="text/javascript"> export default{ methods: { deleteQuote() { this.$emit('deleteThisQuote', this.index) } }, props: ['index'] } </script>

Since this component doesn't have direct access to my array, I emit a custom event that is listened for in its parent. This triggers another method which splices my array at this.index. Following is the parent component...

<template> <div> <quote-singles class="col-sm-3 panel panel-default" v-for="(quote, index) in quotes" :index="index" @deleteThisQuote="deleteQuote($event)"><h3>{{index}}{{quote}}</h3> </quote-singles> </div> </template> <script type="text/javascript"> import quoteSingles from './quoteSingles.vue' export default{ methods: { deleteQuote(event) { this.quotes.splice(this.event, 1); } }, props: ['quotes'], components: { 'quoteSingles': quoteSingles } } </script>

This does everything I want, except it splices out the wrong index in the array. No matter which element I click, myArray[0] is removed. What is going on here? Am i missing something elementary?

I am compiling a Vue script with webpack. I am testing dynamic components loading asynchronously, but I get an error during compiling.

Vue.component( 'login-form', () => import('./async v-components/login-form') );

I get: Syntax Error: Unexpected token (22:10) pointing to 'i' of 'import'.

webpack.mix.js:

mix.js('resources/assets/js/frontApps.js', 'public/js').extract(['vue']);

Any idea why this simple example fails? I followed the guide precisly.

I am learning vue js and i created an admin page which i am able to route when i am using router-view but when i am trying href or router-link i am not able to load the template thought the url gets changed.

this is my main.js

import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import App from './App.vue' import admin from "./components/admin/admin.vue" import users from "./components/users.vue" Vue.use(VueRouter); Vue.use(VueResource); const router = new VueRouter({ routes: [ {path:'/admin',component:admin}, {path:'/users',component:users}, ] }) new Vue({ el: '#app', router: router, render: h => h(App) })

this is my app.vue

this is my app vue file which just want to route to a page via href

<template> <div class = "container" id="app"> <h1>Hi from</h1> <hr> <a href="/api/users">sdsd</a> </div> </template> <script> export default { name: 'app', data(){ return{ users: "" } } } </script> <style> #app { } </style>

this is my admin.vue

this the template i want to load in my app.vue its a simple template i want to display in app.vue. its somehow working router-view but it is not working with router-link

<template> <div class="container"> <h1> HI i am routing from admin </h1> </div> </template>

the above thing is working via router-view but not thing router-link or href anchor tags............................................................................................................................................................................................

I am getting up the details in a form for a hotel entry with basic details and viewing it in Room.vue. The created values were displayed here but here i need to give edit option for the filled details. When i click the edit, the page should redirect to RoomsEdit.vue and i should get the filled up contents in that page with form inputs. For that i have tried the following codes but nothing solves my issue.. Kindly have a go through and help me in solving the issue.

Room.vue:

<table class="table table-striped table-hover rooms-table"> <thead> <tr> <td>Title<i class="fa fa-sort"></i></td> <td>Sub Title<i class="fa fa-sort"></i></td> <td> Edit </td> <td> Delete </td> </tr> </thead> <tbody> <tr v-for="room in items"> <td>{{ room.title }}</td> <td>{{ room.subtitle }}</td> <td> <router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id">Edit</router-link> </td> <td> <button class="btn btn-primary" v-on:click="deleteRoom(room)">Delete</button> </td> </tr> </tbody> </table>

Here i am giving edit option and making a redirect to edit page..

RoomsEdit.vue:

<form @submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data"> <div class="form-group"> <label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="title" class="form-control" id="title" v-model="itemsData.title"> <span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle"> <span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span> </div> </div> </form>

Script of RoomsEdit:

<script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ title : '', subtitle : '', }, errors: { } } }, methods:{ fetchRoom(id){ axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); }, updateItems(e){ axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=>{ this.this.itemsData = ""; this.$router.push('/admin/rooms'); }).catch(error=>{ this.errors = error.response.data; }); } }, created: function() { this.fetchRoom(this.$route.params.id); } } </script>

RoomsCreate.vue:

<form @submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data"> <div class="form-group"> <label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="title" class="form-control" id="title" v-model="itemsData.title"> <span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle"> <span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span> </div> </div>

Script of Rooms.vue:

<script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ title : '', subtitle : '', } } }, methods: { deleteRoom: function (room) { var index = this.items.indexOf(room); this.items.splice(index, 1); } }, mounted() { axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); } } </script>

Script of RoomsCreate.vue:

<script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ title : '', subtitle : '', }, errors: { } } }, methods:{ addItems(){ axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=>{ this.this.itemsData = ""; this.$router.push('/admin/rooms'); }).catch(error=>{ this.errors = error.response.data; }); } } </script>

The issue i am facing is when i click the edit in Room.vue, it redirects to the RoomsEdit.vue where i am not getting the values that was already created, i need to get those value when i go to RoomsEdit.vue there i should edit and update the content.

i'm creating a SPA application in Laravel that consists of an API (in PHP) and two applications in VueJS, an Admin Backoffice and a Frontend Web portal.

Ideally i'd like to keep the API in a separate domain like api.mydomain.com but devops told me that couldn't be cause it would mess up their CI structure namely because according to them it's hard to keep everything in sync that way...

So i'm forced to do everything in the same project, now, i don't think that my Vue Routes and stuff and stuff belong in the "resources" directory next to Laravel's translations and Blade views... And using blade views for the "catch-all" route means i cannot use Webpack's HTML plugin, also i think front-end and admin views should have different dependencies and webpack.config files.

So. I'm trying to do the following folder structure

/server |-api (replaces the APP folder) | |--v1/ |---Controllers/ |---Middleware/ |---Repositories |---Traits |---routes.php |--Core(Kernels) |--Models |--Jobs |--Providers | |-bootstrap |-config |-database |-resources(laravel blade views (if any) and translations) |-storage |-tests(phpunit) |-composer.json /admin |-components |-views |--partials/ |-utils |-services |-vuex |-App.vue |-config.js |-main.js |-routes.js |-index.html |-package.json |-webpack.config.js

The idea is you always need to be routes through Laravel's index.php file and then in the laravel routes i have a catch-all which simply returns Vue's index.html i do this because i need a simple HTML root file in order to be able to take advantage of Webpack HTML plugin What do you guys think about this idea? Feasible? Any better ways of achieving this sort of separation?