Software

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?

I am new to Vue and have improved this code from various tutorials.

However, I am faced with this "Undefined" group name issue here.

.html:

<multiselect v-model="value" :options="options" :multiple="true" track-by="name" :hide-selected="true" :custom-label="customLabel" :searchable="false" placeholder="" group-values="details" group-label="groupDivision" > </multiselect>

.js:

new Vue({ components: { Multiselect: VueMultiselect.default }, data: { value: { groupDivision: 'Government', name: 'Fish', contact: 'Fish@.com' }, options: [ { groupDivision: 'Governemnt', details:[ { name: 'Fish', contact: 'Fish@.com' }, { name: 'Police', contact: 'Police@.com' }, { name: 'Society', contact: 'Society@.com' } ] }, { groupDivision: 'Media', details:[ { name: 'BBC', contact: 'BBC@.com' }, { name: 'CNN', contact: 'CNN@.com' }, { name: 'CBC', contact: 'CBC@.com' } ] }, ] }, methods: { customLabel (option) { return `${option.name}` } } }).$mount('#app')

I've already set the "group-label" but it still shows "undefined".

Does anyone have idea what the problem? Thanks in advance!

Link to the code: https://codepen.io/dennis-leeyinghui/pen/VzybrR

What is the best way to update the entire observed array and trigger a rerender in vue.js without having to iterate an push all the items?

I have read the documentation here: https://vuejs.org/v2/guide/list.html#Replacing-an-Array

But it doesn't make sense to me having to filter, concat or slice just to update the array? There must be something I missed?

Steps

• Create a method in vue, showMessage
• Create an object message: {show : false, text: 'any text'} in the data section
• call showMessage from an HTML element using v-on:click='showMessage'
• In the showMessage function:
  • set the value of 'show' to true using this.message.show = true
  • print the value of 'show' using console.log(this.message.show)

What is expected?

The value of 'show' should set to true without any error/warning

What is actually happening?

I get a warning AND an error on the line:

this.message.show = true

as below:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'toFixed' of undefined" TypeError: Cannot read property 'toFixed' of undefined

However, the line console.log(this.message.show) prints correctly

The issue is not re-producible, when the same button is clicked under other circumstances.

The expected behavior is as shown by the jsFiddle, but I dont see any error running it.

Vue Version: 2.4.2

JSFiddle: https://jsfiddle.net/afshanaman81/50wL7mdz/54338/

Depending on whether the user is logged in, I need to adjust the size and content of two divs inside my topbar. So if they aren't logged in it should be like this:

<div id='search' width="400px"></div><div id="login" width="200px"><img></div>

And when they're logged in it should be like this:

<div id='search' width="200px"></div><div id="login" width="400px"><div id='somecontent></div><div id='morecontent'></div></div>

I know i can achieve this by hardcoding both of them entirely and then using v-if statements but I was wondering if there was a better way.

Vue JS computed property is not triggered With this markup

<!-- language: lang-html --> <p>£{{plant_price}}</p> <div v-if="selected.plant.variations.length > 0 "> <select v-model="selected.plant.selected_variation" class="form-control"> <!-- inline object literal --> <option v-for="(variation, i) in selected.plant.variations" :selected="variation.id == selected.plant.selected_variation ? 'selected' : ''":value="variation.id"> {{variation.name}} </option> </select> </div> <!-- language: lang-js --> var app = new Vue({ el: '#vueApp', data: { selected: { type: {a: '' , b: ''}, vehicle: '', plant: { } }, computed: { plant_price: function() { if (this.selected.plant.variations.length > 0 ) { var variant = _.find(this.selected.plant.variations, {id: this.selected.plant.selected_variation }); return variant.price; } else { return this.selected.plant.price; } } ...

selected.plant is populated via Ajax. I have checked through the debugger, and can see that all the correct properties are available.

selected:Object type:Object vehicle: "Truck" plant:Object id:26 price:"52" regular_price:"100" selected_variation:421 variations:Array[2] 0:Object id:420 name:"small" price:52000 regular_price:52000 1:Object etc...

I have a computed property, which should update the plant_price based on the value of selected.plant.selected_variation.

I grab selected.plant.selected_variation and search through the variations to retrieve the price. If no variation exists, then the plant price is given.

When the app loads, I can see that the plant_price is updated. However, it does NOT respond when I change selected.plant.selected_variation - its as if the computed property isn't listening to selected.plant.selected_variation

I must be doing something wrong?

I am new in vue js. Currently i am trying to passing data into vue js components. So far if i passing user name or other information is working fine. But if i passing the avatar link it will showing error in npm run watch. Any solution for this?

This is my code

<li v-for="comment in comments"> <div class="avatar"><img src="{{ comment.user.avatar }}" alt="" /></div> <div class="comment-content"><div class="arrow-comment"></div> <div class="comment-by">{{ comment.user.name }}<span class="date">22 August 2017</span> <a href="#" class="reply"><i class="fa fa-reply"></i> Reply</a> </div> <p>{{ comment.content }}</p> </div> </li>

This is the object i get.

enter image description here

The vue - awesome - swiper Problems with plug-ins

I'm trying to v-model to an array item's property. When I load the page I see "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' in the console and a blank page.

this is with vue.js 2.x.

https://codepen.io/jzaun/pen/YxYyJN/

html

<div id="ai-config"> <div class="info"> <div class="row"> <h1>Resource Points</h1> </div> <div class="row"> <label>Total:</label> <div class="value"> {{maxResourcePoints}} </div> </div> <div class="row"> <label>Remaining:</label> <div class="value"> {{maxResourcePoints - usedResourcePoints}} </div> </div> </div> <div> <table> <tr> <td></td> <td v-for="(option, idx) in options"> {{option.title}} </td> </tr> <tr v-for="n in directions"> <td>Direction {{n}}</td> <td v-for="option in options"> <input type="checkbox", v-model="selected[n][option.key]" /> </td> </tr> </table> </div> </div>

javascript

new Vue ({ el: '#ai-config', data: { maxResourcePoints: 10, usedResourcePoints: 0, selected: [], directions: 8, options: [{ title: 'Food', key: 'viewFood', cost: 1 }, { title: 'Water', key: 'viewWater', cost: 1 }, { title: 'Own', key: 'viewOwn', cost: 1 }, { title: 'Other', key: 'viewOther', cost: 1 }] }, methods: { }, created: function () { this.selected = []; for(i=0; i< 8; i++) { this.selected.push({}); } } });