Software

I'm trying to determine how to pass an event down with a bound change listener to a child input component. I'm using wrapped input components, but want to be able to define methods in the parent component.

//App.js: <currency-input :input="changeInput" :value="inputs.name"></currency-input> <input :input="changeInput" :value="inputs.address"></input> <script> export default: { changeInput(e) { this.$store.dispatch('changeInput', e); } } <script> //currency-input <masked-input type="currency" class="currency-input" :mask="currencyMask"> </masked-input> //store.js vuex action changeProp: function( state, e ){ state.dispatch('change_prop', e.target.name, e.target.value); }

This fires on the 'input', but not on the 'currency-input'. If I add @input prop to the currency-input and bind it to the masked-input's @input, then the function runs but the value of 'e' is just the input value, not the event.

Why is this happening and how can I pass the function so that the parameter ends up being the event itself?

I have this vue.js component that uses axios to retrive a json array of joke objects :

<script> import axios from 'axios'; export default { name: 'showJokes', data () { return { jokes:[] } }, methods: { }, created() { axios.get('http://127.0.0.1:8090/api/jokes).then(function(data){ //console.log(data); works fine this.jokes = data.body; }); } } </script>

When I log the result in console it's fine but when I try to put it in jokes array I get

Uncaught (in promise) TypeError: Cannot set property 'jokes' of undefined

This may be a trivial error but as a newbie to vue.js I'm stock on this so appreciate your hints.

I'm working with Vuex and in one of my components I try to pass an iterable element as function parameter in a v-for loop. My problem is that instead of getting the element I want, I get an empty object...

I would also like to know if I'm passing the parameter to the store actions the right way?

Code goes as follow:

//Side_bar.vue <template> <div id="sideBar"> <ul> <li v-for='l in links'> <button v-on:click='d(l.title)'>{{l.title}}</button> </li> </ul> </div> </template> <script> export default { name: 'sideBar', data () { return { links: [ {'title':'asset', 'valuesss':'ASSET'}, {'title':'task', 'valuesss':'TASK'}, {'title':'user', 'valuesss':'USER'} ] } }, computed:{ d(v){ console.log(this.$store.state.activeTable) // update active table this.$store.dispatch('updateActiveTable',v) } } } </script> <style> li { list-style-type: none; padding-bottom: 5px; } </style>

store file looks like this

//store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { activeTable: 'assets' // def view }; const mutations = { setActiveTable(context,v){ context.activeTable = v } }; const getters={ getActiveTable(context){ //return active table return context.activeTable } }; const actions={ updateActiveTable(context,v){ console.log(context) context.commit('setActiveTable',v) } } export default new Vuex.Store({ state, mutations, getters, actions })

App.vue looks like that

<template> <div id="app"> <sideBar></sideBar> <tableComponent></tableComponent> </div> </template> <script> import sideBar from './components/Side_bar' import tableComponent from './components/Table_component' export default { name: 'app', components:{ sideBar, tableComponent } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } small { display: block; font-style: italic; } </style>

I am trying to create a Vue page that contains nested field collections. I.e. Parent form and repeatable child forms.

It works with the exception that when deleting a child form, the template renders incorrectly

Please see the fiddle example that I created - https://jsfiddle.net/c4marcus/1mu2oceb/8/

The sample data contains basic information for The Beatles. If you click the trash can next to "Ringo" then mistakenly "George" will disappear and not "Ringo".

However, when you click submit the correct data is being saved (see screenshot below).

I feel like the problem must lie with the MemberFormset vue component's remove method which is triggered by clicking the trash can button.

remove: function(index) { this.members.splice(index, 1) this.$emit('input', this.members) },

Once spliced, the template should render the array of forms with the new data.

<div class="form-group" v-for="(member, index) in members"> <member-form :model="member" :index="index" @input="update(index, $event)"> <div slot="trash"> <button type="button" class="btn btn-default margin-top-md" @click="remove(index)"> <i class="fa fa-trash"></i> </button> </div> </member-form> <hr v-if="separator(index)" /> </div>

I finished my Vue app and ran npm run build to deploy the app. Everything seems to be fine. However, some of my images will not run. Four of my images render just fine. However, those four images are not in my img folder. On the console, I get this error:

GET file:///C:/static/img/Two.550dff0.jpeg net::ERR_FILE_NOT_FOUND

The image name is "Two.550dff0.jpeg" and it is in the img folder but the app cannot access it. Why is that? Also, for the four images that render, those images are not in the img folder. I also cannot find those four images in the dist folder.

I have a string of text

<p>This is some text <span style="color: rgb(54, 54, 54);"> and here is a bit more</span> and even more. </p>

and this regexp <[^>]*> will grab the following from it.

<p> <span style="color: rgb(54, 54, 54);"></span> </p>

How would I grab the inverse of this instead? I am looking to get the text instead. Been searching all over and have only managed to find people using the above regexp to do a content replace to strip tags.

I'm looking to search the text in my VueJS app.

When I update the the state.level in the state property the computed property that is assigned to observe that update doesn't get triggered. You can see the relevant code below.

The entry point is where I get the data with a get request. Then I pass on the information, which then continues recursively to create a file/folder tree structure.

When I click on a folder I want to toggle the open attribute. Everything works except that the 'get open()' function doesn't pick up the state.level change.

Does anybody have any idea as to why?

// store 22 interface IHash{ 23 [id: number]: OU 24 } 25 26 var store = new Vuex.Store({ 27 state: { 28 map: {} as IHash, 29 root: [], 30 loaded: false, 31 level: [], 32 }, 33 mutations: { 34 addToMap(state, data){ 35 state.map[data.id] = data; 36 }, 37 pushChild(state, data){ 38 state.map[data.parentId].children.push(data.ou); 39 }, 40 addToRoot(state, id){ 41 state.root.push(id); 42 }, 43 open(state, data){ 48 for(let ou of ouList){ 49 if(ou.id === data.id){ 50 ou.open = !ou.open; 51 } else { 52 ou.open = false; 53 } 54 } 55 } 56 }, 57 getters: { 58 map(state){ 59 return state.map; 60 } 61 }, 62 actions: { 63 getChildren({ commit, state }, id){ 64 axios.get('/api/ou', { 65 params: { 66 parentId: id, 67 } 68 }).then( response => { 69 for(let i=0; i<8; i++){ 70 state.level[i] = []; 71 } 72 for(let r of response.data){ 73 let ou: OU = new OU({ 74 id: r.id, 75 name: r.name, 76 parentId: r.parentid, 77 level: r.level, 78 open: false, 79 children: [new OU({})], 80 }) 81 if(ou.id === 1455){ 82 commit('addToRoot', ou.id); 83 } else { 84 let map = state.map; 85 let parentOu: OU = map[ou.parentId]; 86 commit('pushChild', { parentId: parentOu.id, ou: ou }); 87 } 88 commit('addToMap', ou); 89 state.level[r.level].push({id: r.id, open: false}); 90 } 91 state.loaded = true; 92 console.log(state.map) 93 console.log(state.level) 94 }).catch( error => { 95 console.log(error) 96 }) 97 }, 98 }, 99 }); // Entry point of the program 1 <template> 2 <div > 3 <h1>Organisational Unit</h1> 4 <button @click="f">button</button> 5 <ul id="ou-wrap" class="ou-wrapper"> 6 <item v-for="(r, index) in $store.state.root" 7 :key="$store.state.map[r].id" 8 :name="$store.state.map[r].name" 9 :id="$store.state.map[r].id" 10 :level="$store.state.map[r].level" 11 :index="index" 12 :children="$store.state.map[r].children"> 13 </item> 14 </ul> 15 </div> 16 </template> 17 18 <script lang=ts> 19 import Vue from 'vue'; 20 import { Component, Watch, Prop } from 'vue-property-decorator'; 21 import axios from 'axios'; 22 import { OU } from './models/ou'; 23 import debounce from './utils/debounce'; 24 28 @Component 29 export default class ouTree extends Vue { 30 //'item': item 31 32 errorMessage: string = ""; 33 children: OU[] = []; 34 35 beforeMount(){ 36 this.$store.dispatch('getChildren'); 37 } 38 39 f(){ 40 this.$store.state.loaded = !this.$store.state.loaded; 41 } 42 43 } // template for the recursive part 1 <template> 2 <li> 3 <div @click="toggle" :class="{ isParent: hasChildren(), 'ou-active': open }" class="ou">{{ name }}</div> 4 <!-- Change 'v-show' to 'v-if' to perform GET on user click --> 5 <ul v-show="open" class="item"> 6 <item v-for="(child, index) in children" 7 :key="child.id" 8 :name="child.name" 9 :id="child.id" 10 :level="child.level" 11 :index="index" 12 :children="child.children"> 13 </item> 14 </ul> 15 </li> 16 </template> 17 29 @Prop() 30 name: string; 31 32 @Prop() 33 id: number; 34 35 @Prop() 36 level: number; 37 38 @Prop() 39 index: number; 40 41 @Prop() 42 children: [OU]; 56 57 toggle(){ 58 this.$store.commit('open', {id: this.id, level: this.level}); 59 console.log(this.$store.state.level) 60 } 61 62 get open(){ 63 return this.$store.state.level[this.level][this.index].open; 64 } 65 66 hasChildren(){ 67 if(this.children.length != 0){ 68 return true; 69 } 70 return false; 71 }

I'm developing a simple app with Node-RED, VueJS and Waton API. I wrote following code in a flow wired to HHTP OUTPUT. The problems start when i try to visualize the web page. The hint message change, the question message no. Why i can't see the questions? Maybe is a problem of scope?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Find Funds</title> <!-- Include VueJS Framework --> <script src="https://unpkg.com/vue"></script> <!-- Include VueJS Resource --> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> <!-- Include W3.CSS Framework --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Include Google Icon --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="w3-cyan"> <div id="app" class="w3-contenitor w3-round w3-white w3-display-middle"> <span clas="w3-row"> <h1 class="w3-margin w3-threequarter">{{getQuestion()}}</h1> </span> <span class="w3-row"> <form> <input type="text" class="w3-margin" v-model="currentAnswer"> <i class="material-icons w3-margin" v-on:click="addAnswer()">send</i> <i class="material-icons w3-margin" v-bind:title="getHint()">help_outline</i> </form> </span> </div> <script id="jsbin-javascript"> var app = new Vue({ el: '#app', data: { count: 0, questions: ["first", "second", "third", "fourth", "fifth"], hints: ["first hint", "second hint", "third hint", "fourth hint", "fifth hint"], answers: [], currentAnswer: "" }, methods: { getQuestion: function(){ return this.questions[this.count]; }, getHint: function(){ return this.hints[this.count]; }, addAnswer: function(){ this.answers.push(this.currentAnswer); this.count++; this.currentAnswer = ""; console.log(getQuestion); console.log(getHint); if(this.count >= this.questions.length){ // some code } } } }) </script> </body> </html>

I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?

I have a section that looks like this:

I am trying to put the closing icon at the right of the section div, so I used the class pull right from bootstrap to try to accomplish the effect. The thing is instead of going to the right the element stays at top. Any way to solve this?

<div @click.prevent="changeView(value.key)" v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in myList"> <div class="panel-body quote"> <span @click.stop="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span> <p>{{value.key}}</p> </div> </div>

I am trying to change a variable value in my component, by emitting the data from one component to another with the eventhub, that is working fine, I am able to send data like that, but for some reason the variable inside the component that is receiving the data is not being changed. This is the code from that component:

<template> <b>{{ numberOfVideos }}</b> </template> <script> import eventHub from '../events.js' export default { data () { return { numberOfVideos: null, } }, ready() { eventHub.$on('videos.counter', function (counter) { this.numberOfVideos = counter }) } } </script>

tried to use the bootstrap-vue for the first time but got issue upon compiling assets. When I run npm run watch, I got an error something like below.

Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8) You may need an appropriate loader to handle this file type. | }, | methods: { | ...clickOut.methods, | noop() { | // Do nothing event handler (used in visible watch) @ ./node_modules/bootstrap-vue/lib/mixins/index.js 2:0-38

app.js

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'; Vue.component('b-navbar', require('./components/Navbar.vue'));

Navbar.vue

<template> <div> <!-- navbar contents here.. --> </div> </template> <script> import { bNavbar } from 'bootstrap-vue/lib/components' export default { components: { bNavbar } } </script>

Expected result

Must display the navbar component

I am building custom directive, it is stored in its own file

autosize.js and it looks like this:

import Vue from 'vue' import autosize from 'autosize' Vue.directive('autosize', { bind: function() { console.log('autosize bind') var self = this Vue.nextTick(function() { autosize(self.el) }) }, update: function(value) { console.log('autosize update') var self = this Vue.nextTick(function() { self.el.value = value autosize.update(self.el) }) }, unbind: function() { autosize.destroy(this.el) } })

I use it inside file component and import it like this:

import Autosize from 'components/directives/autosize.js'

register it like this:

directives: { Autosize }

Inside my file component i try to use it like this :

<textarea v-autosize="input" :value="input" @input="update" class="form-control">{{input}}</textarea>

Autosize is a plugin that is supposed to make textarea grow, ofcourse nothing happens when i test adding more text. But it seems that its not autosize that fails to work but perhaps I have missed something, not even these get printed:

console.log('autosize bind') console.log('autosize update')

when I dynamically create the component.

Anyone has an idea what I have missed so that directive is not binding or updating?

I'm iterating over this array of object's and in each object there's a property - keyword.edited which iniitalized with the value - false the all loop looks like this:

<tr v-for="(keyword, index) in keywords"> <td>{{keyword.tag_name}}</td> <td @click="edit_keyword(index)"> <el-input-number v-show="keyword.edited" :step="step" size="small" v-model="keyword.max_bid"></el-input-number> </td> </tr>

now since initalized with false none of the keywords will show. problem is when i click edit_keyword(index) the value of the relevant keyword changes to true:

edit_keyword(index){ this.keywords[index].edited = !this.keywords[index].edited return this.keywords[index].edited }

but the DOM won't update, or in other words the relevant keyword won't show as i expected. any idea how can i achive this one? tried to implement same idea with computed property as well and still didn't work...

I'm using VueJS for the front-end of my application and Laravel for the backend. Where is the best place to reduce calls to the server with a free text search?

Search input 'hello'

@keyup will make 5 server requests

1st = h 2nd = he 3rd = hel 4th = hell 5th = hello

Ideally, I would like to be able to stop server requests until the user has stopped typing, or has delayed presses in keystrokes. That way I would only be sending 1 or 2 requests to the server for each search.

I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link

Well, basicly i have a array of items which every item should be rendered in a v-for, this panels has some properties like for example the color, that is the one that is causing me troubles.

I have this code:

<template> <div> <h4 class="text-center">Actions History</h4> <div class="col-md-10"> <div :style="panel.color" class="panel panel-default"> <ul class="list-group"> <li v-for="panel in getPanels" class="list-group-item">A section {{panel.section}} was {{panel.action}}</li> </ul> </div> </div> <div class="col-md-2"> <!-- here lives the buttons--> <div class="btn btn-default">Clear All</div> </div> </div> </template>

important part:

<div :style="panel.color" class="panel panel-default">

the panel.color should be the color of each panel in the list group item, but since the v-for is under it i can't access each element of the list, it is undefined. How can i solve this? is there another way?

Consider the following code. I want to toggle an excerpt and description. The code directly below does that, but it means having the <a> outside of the article, and I would prefer it inside.

<article v-if="!toggle" v-html="item.excerpt"></article> <a href="#" v-if="!toggle" @click.prevent="toggle = 1">Read more...</a> <article v-if="toggle" v-html="item.description"></article> <a href="#" v-if="toggle" @click.prevent="toggle = 0">Show less...</a>

It could be rewritten as

<article v-if="!toggle"> <span v-html="item.excerpt"></span> <a href="#" @click.prevent="toggle = 1">Read more...</a> </article> <article v-if="toggle"> <span v-html="item.description"></span> <a href="#" @click.prevent="toggle = 0">Show less...</a> </article>

But that would mean the excerpt/description is wrapped with a <span>. Is there a way to use the v-html directive and not output the wrapping tag?

I want to pass Object data to a child component in Vue, but when the computed state is invoked the type of prop is String instead of Object. However in the template i can display the first attribute.

Parent component:

<template> <catalog-search-box id="box" :title="$t('parameter')" header-icon-class="fa fa-thermometer-half" :deployed="deployed"> <parameter-search-criteria-content v-bind:model="treeData"></parameter-search-criteria-content> </aeris-catalog-search-box> </template>

The script part:

export default { props: { deployed: { type: Boolean, default: false } }, watch: { lang (value) { this.$i18n.locale = value; } }, destroyed: function() { }, created: function () { this.$i18n.locale = this.lang; }, mounted: function() { }, computed: { }, data () { return { lang: 'en', treeData : { name: 'My Tree', children: [ { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'child folder', children: [ { name: 'hello' }, { name: 'world' } ] }, { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'hello' }, { name: 'Word' } ] } ] } ] } } }

The child component :

<template> <li class="parameter-search-criteria-content-host"> <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <ul v-show="open" v-if="isFolder"> <parameter-search-criteria-content class="item" v-for="model in model.children" :model="model"> </parameter-search-criteria-content> <li class="add" @click="addChild">+</li> </ul> </li> </template>

And in the script, when the computed state is called, it's strange convert model into [Object object] string..

computed: { isFolder: function () { return this.model.children && this.model.children.length }

}

in addition, it's a single file component structure; so components are registered in separate elements (Vue.customElement('parameter-search-criteria-content', ParameterCriteriaContent);

Is it possible to use Vue.js for server side rendering for Koa2?

Currently this is my setting in my package.json:

"dependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1", "ect": "^0.5.9", "koa": "^2.3.0", "koa-combine-routers": "^1.0.0", "koa-router": "^7.2.1", "koa-static": "^4.0.1", "koa-views": "^6.0.2", "mongodb": "^2.2.31" }, "devDependencies": { "mocha": "^3.5.0", "supertest": "^3.0.0" }, "scripts": { "test": "mocha --harmony", "start": "nodemon --exec babel-node --presets es2015 app/index.js" },

I am using ect for rendering my templates, e.g. index template:

<html lang="en"> <head> <meta charset="UTF-8"> <title>Koa</title> <link href="/styles.css" rel="stylesheet"> </head> <body> <h1 class="text-uppercase">Koa</h1> <p><%- @message %></p> </body> </html>

index route:

const index = async(ctx, next) => { const users = ctx.mongo.collection('users') const result = await users.insert({ name: 'haha' }) const userId = result.ops[0]._id.toString() const output = await users.find().toArray() await ctx.render('index', { message: JSON.stringify(output) }); users.remove({_id: new mongo.ObjectID(userId)}) } router.get('/', index) module.exports = router

in my root app.js:

import views from 'koa-views' app.use(views(__dirname + '/views', map: { html: 'ect' // or 'handlebars' }, extension: 'ect' } ))

How can I achieve this with Vue?