Software
Vue 2 Vuex - update values via form or add new item
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?
v-on:click in component not working
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 } })Vue 2 - use same form for adding new and editing
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?
Vue basic starting
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>stop recieving events from destroyed child component
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?
How to bind an input tag inside a popover to Vue Model
I have an input inside a popover content like so:
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.
get element style and assign it to another element in vue.js
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 ?!!!
vue.js with vue-multilanguage getting error: Unexpected token export - where to start debugging?
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 MultiLanguageHere 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?
vue submit button data
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? )
VueJS: Component communication, the right way?
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
Is there a concept of path when a div changes its location?
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)?
webpack bundle looking for 2.bundle.js in the wrong location
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! :)
Vue error in Laravel mix: Uncaught ReferenceError: msg is not defined but it is
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!
How to loop in vue js
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
my a childcomponent in vue, modify some value inside of it, how to make ti available to parent?
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?
How to make SSR render every state using Express or Vue router?
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.
which is better? conditional rendering or computed Properties in vue2?
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.
How to read the data-* of an element in VueJs?
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
Uncaught ReferenceError: Vue is not defined when put vue setting in Index.html
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 ?
Splice out this.index from array between components in VueJS
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?