Vuejs

I'm trying to create a global component using laravel mix with vue js, but when accessing property this.$el it's undefined. Here's my component file:

Datepicker.vue

<template> <input type="text" :name="name" :class="myclass" :placeholder="placeholder" :value="value" /> </template> <script> export default { props: ['myclass','name','placeholder','value'], data () { return { } }, created () { console.log("this.$el", this.$el); //undefined console.log("this", this); //$el is defined var vm = this; var options = { "locale": "es", "onChange": function(selectedDates, dateStr, instance) { vm.$emit('input', dateStr); } }; $(this.$el) // init .flatpickr(options); }, destroyed(){ console.log("destroyed"); } } </script>

Doing a hotel room booking application in vue2 js. having two screen 1) one gets search input values 2) displays the search result page. see the screen shot below

My route.js is as follows

import FrontEndHome from './components/fontend/Home.vue'; import FrontEndCheck from './components/fontend/Check.vue'; export const routes = [ { path: '/', component: FrontEndHome }, { path: '/check', component: FrontEndCheck } ];

What i want is has to get from and to date from first image and has to display those dates in second image.

I am using SQLDESIGNER plugin for sql schema design, I am trying to integrate this with vue js. I tried to get the xml data from the design, but unable to get that.

Can anyone assist me, to integrate this plugin with vue js also how to map the design xml data with v-model.

Any help would be highly appreciated. Thanks

I have following template:

<template> <div class="is-half"> <form @submit.prevent="save"> <input type="hidden" name="bookID" :value="book.id"> <div class="field"> <label class="label">Title</label> <div class="control"> <input class="input" type="text" placeholder="Title" :value="book.title"> </div> </div> <div class="control"> <div class="select"> <select> <option v-for="author in this.$store.state.authors" :value="author.name" :selected="author.name == book.author" >{{ author.name }}</option> </select> </div> </div> <div class="field"> <label class="label">Description</label> <div class="control"> <textarea class="textarea" placeholder="Description" :value="book.description"></textarea> </div> </div> <div class="control"> <button class="button is-primary">Submit</button> </div> </form> </div> </template> <script> export default { data() { return { book : { id: null, title: '', isbn: '', author: '', description: '', added: '' } } }, methods: { save(book) { console.log(this.book); } }, created() { if(this.$store.state.book != 'undefined'){ this.book = Object.assign({}, this.$store.state.book); } }, computed: {} } </script> <style></style>

I am trying to update the value of selected item, but whenever I press save, the object has the same values which it gets on load. How can I update values if the I load new object, or insert new object if id is null?

A vue.js component creates a button which should call a function, but the function is never called and the v-on:click is not visible in Chrome's element inspect. My html goes like this:

<bottomcontent></bottomcontent>

And my Vue is like this:

var bottomcontent = { template: <div class="bottomcontent"><div class="moreresults" v-on:click="homepage.appendcontent">More Results</div></div> } new Vue({ el : 'body', data : { homepage:{ numberofdivs: 60 } }, methods : { homepage : { appendcontent: function() { homepage.numberofdivs += 60 } } }, components: { 'bottomcontent': bottomcontent } })

I have following template:

<template> <div> <form @submit="save"> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Name" :value="book.title"> </div> </div> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Name" :value="book.author"> </div> </div> </form> </div> </template> <script> export default { data() { return { book : {} } }, methods: { save() { } }, created() { if(this.$store.state.book != 'undefined'){ this.book = this.$store.state.book; } }, computed: {} } </script> <style></style>

So far everything works fine if the book is pass with the this.$store.state.book, but if this is not passed the form is failing, with the error message:

** Error in render function: "TypeError: Cannot read property 'title' of undefined"**

I thought that passing the empty object would dynamically bind the book object and auto create the params.

Is it possible to use the same form for both adding new and editing?

Im trying to learn Vue , and I just started on mac, installed it with terminal,made new folder,opened it in sublime and this is my code, but when I opet in browser , still it doesnt work. Why? Do I have to install something more?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vueboze</title> </head> <body> <input type="text" name="input"> <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"></div> <script src="/dist/build.js"></script> </body> <script> let data = { message: 'Hello World' }; document.querySelector('#input').value = data.message; </script> </html>

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.