Software

Basically i've made proyxy-component which renders different components based on what the :type is and it works great. The point is that I create a schema of the form controls and a separate data object where the data from the form controls is stored. Everything is working good but i have a problem when formData object contains nested objects.

In my example test.test1

How can i make the v-model value dynamic which is generated based on what the string is.

My Compoennt

<proxy-component v-for="(scheme, index) in personSchema.list" :key="index" :type="scheme.type" :props="scheme.props" v-model="formData[personSchema.prefix][scheme.model]" v-validate="'required'" data-vv-value-path="innerValue" :data-vv-name="scheme.model" :error-txt="errors.first(scheme.model)" ></proxy-component>

Data

data() { return { selectOptions, formData: { person: { given_names: '', surname: '', sex: '', title: '', date_of_birth: '', place_of_birth: '', nationality: '', country_of_residence: '', acting_as: '', test: { test1: 'test', }, }, }, personSchema: { prefix: 'person', list: [ { model: 'given_names', type: 'custom-input-component', props: { title: 'Name', }, }, { model: 'surname', type: 'custom-input-componentt', props: { title: 'Surname', }, }, { model: 'test.test1', type: 'custom-input-component', props: { title: 'test 1', }, }, { model: 'sex', type: 'custom-select-component', props: { title: 'Sex', options: selectOptions.SEX_TYPES, trackBy: 'value', label: 'name', }, }, ], }, }; },

I have a component

<template>somecode</template> <script> export default { name: 'Card', created() { axios.get(apiObjUrl) somecode }) } </script>

this my url: http://127.0.0.1:8080/#/card/12

But I have a problem:

when I use router-link like this:

<router-link to="/card/155"> card 155</router-link>

my url changes: http://127.0.0.1:8080/#/card/155

but the created() method doesn't get fired. so I don't make new xhr request to api and data not changes what do I do?

QA guys recently complained they can't automate frontend testing. Because our html looks all the same from outside. So as a lazy hack i did this

<template> <div :role="$options.name"> ... </div> </template>

Which just takes name from script and applies it in html.

Line :role="$options.name" goes in every component. Is there any DRYer solutions? Please share.

In my project, i have created and viewed the details of a room component.. I am in the need of doing edit functionality in it.. How to make edit in it and here are the following codes that i have tried,

Rooms.vue:

<template> <div> <admin-nav></admin-nav> <div class="indvi-page-wrap" id="page-wrapper"> <div class="page-header"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <h1><i class="fa fa-hotel"></i> Rooms</h1> </div> <div class="col-md-2"> <router-link to="rooms/create" tag="span"><h1><button type="button" class="btn btn-danger"><i class="fa fa-plus-circle"></i> New</a></button></h1></router-link> </div> </div> </div> </div> <div class="container-fluid"> <div id="dashboard"> <div class="search form-inline"> <div class="row"> <div class="col-md-6 text-left"> <div class="form-inline"> <input type="text" name="q_search" value="" class="form-control input-sm" placeholder="Search..."> <button class="btn btn-default btn-sm" type="submit" id="search" name="search"><i class="fa fa-search"></i> Search</button> </div> </div> <div class="col-md-6 text-right"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-th-list"></i> Display</div> <select class="select-url form-control input-sm"> <option selected="selected">20</option><option value="index.php?view=list&amp;limit=50">50</option><option value="index.php?view=list&amp;limit=100">100</option> </select> </div> </div> </div> </div> <div class="table-contents"> <div class="table-responsive"> <table class="table table-striped table-hover rooms-table"> <thead> <tr> <td>#<i class="fa fa-sort"></i></td> <td>ID<i class="fa fa-sort"></i></td> <td>Image<i class="fa fa-sort"></i></td> <td>Title<i class="fa fa-sort"></i></td> <td>Sub Title<i class="fa fa-sort"></i></td> <td>Home<i class="fa fa-sort"></i></td> <td>Status<i class="fa fa-sort"></i></td> <td>Actions</td> </tr> </thead> <tbody> <tr v-for="room in items"> <td></td> <td>{{ room.id }}</td> <td><img :src=room.imgurl style="height:100px;"></td> <td>{{ room.title }}</td> <td>{{ room.subtitle }}</td> <td>{{ room.home }}</td> <td>{{ room.checked }}</td> <td> <router-link class="btn btn-primary" to="rooms/edit">Edit</router-link> <i class="fa fa-remove text-danger"></i></td> </tr> </tbody> </table> </div> </div> <div class="search form-inline"> <div class="row"> <div class="col-md-6 text-left"> &nbsp;<input type="checkbox" class="selectall"> Select all&nbsp; <select name="multiple_actions" class="form-control input-sm"> <option value="">- Actions -</option> <option value="check_multi">Publish</option> <option value="uncheck_multi">Unpublish</option> <option value="display_home_multi">Show on homepage</option> <option value="remove_home_multi">Remove from homepage</option> <option value="delete_multi">Delete</option> </select> </div> <div class="col-md-6 text-right"> <div class="input-group"> <div class="input-group-addon"><i class="fa fa-th-list"></i> Display</div> <select class="select-url form-control input-sm"> <option selected="selected">20</option><option value="index.php?view=list&amp;limit=50">50</option><option value="index.php?view=list&amp;limit=100">100</option> </select> </div> </div> </div> </div> <div class="well"></div> </div> </div> </div> </div> </template> <script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ max_children : '', max_adults : '', image : '', max_people : '', min_people : '', title : '', subtitle : '', alias : '', descr : '', facilities : '', stock : '', price : '', home : '', checked : '', rank : '', start_lock : '', end_lock : '' } } }, mounted() { axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); } } </script>

RoomsEdit.vue:

<template> <div> <admin-nav></admin-nav> <div class="indvi-page-wrap rooms-new" id="page-wrapper"> <div class="page-header"> <div class="container-fluid"> <div class="row"> <div class="col-xs-5 col-md-5"> <h1><i class="fa fa-hotel"></i>Rooms</h1> </div> <div class="col-xs-7 col-md-7 text-right save-buttons"> <a href="#"> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="New"> <i class="fa fa-plus-circle"></i><span class="hidden-sm hidden-xs"> New</span> </button> </a> <a href="#"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Back to list"> <i class="fa fa-reply"></i><span class="hidden-sm hidden-xs"> Back to list</span> </button> </a> <span><button type="submit" name="add" class="btn btn-default hidden-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save</span></button></span> <span><button type="submit" name="add_back" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save and exit"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save and exit</span></button></span> </div> </div> </div> </div> <div class="container-fluid"> <div id="dashboard"> <div class="alert-container"> <div class="alert alert-success alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> <div class="alert alert-warning alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> <div class="alert alert-danger alert-dismissable" style="display: block;">Expected images size: 1920 x 1440px<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button></div> </div> <div class="form-head"> <a>English(default) </a> </div> <div class="room-form-content"> <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> <div class="form-group"> <label for="alias" class="col-sm-2 control-label">Alias<span class="red">*</span></label> <div class="col-sm-6"> <input type="text" name="alias" class="form-control" id="alias" v-model="itemsData.alias"> <span class="text-danger">{{ errors.alias?errors.alias[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_children" class="col-sm-2 control-label">Max children<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_children" class="form-control" id="max_children" v-model="itemsData.max_children"> <span class="text-danger">{{ errors.max_children?errors.max_children[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_adults" class="col-sm-2 control-label">Max adults<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_adults" class="form-control" id="max_adults" v-model="itemsData.max_adults"> <span class="text-danger">{{ errors.max_adults?errors.max_adults[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="max_people" class="col-sm-2 control-label">Max people<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="max_people" class="form-control" id="max_people" v-model="itemsData.max_people"> <span class="text-danger">{{ errors.max_people?errors.max_people[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="min_people" class="col-sm-2 control-label">Min people<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="min_people" class="form-control" id="min_people" v-model="itemsData.min_people"> <span class="text-danger">{{ errors.min_people?errors.min_people[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="descr" class="col-sm-2 control-label">Description</label> <div class="col-sm-6"> <textarea type="text" name="descr" class="form-control" id="descr" v-model="itemsData.descr"></textarea> <span class="text-danger">{{ errors.descr?errors.descr[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="facilities" class="col-sm-2 control-label">Facilities</label> <div class="col-sm-6"> <!-- <input type="text" name="facilities" class="form-control" id="facilities" v-model="itemsData.facilities"> --> <div class=" form-inline"> <select name="facilities" multiple="multiple" id="facilities" size="8" class="form-control"> <option value="1">Air conditioning</option> <option value="2">Baby cot</option> <option value="3">Balcony</option> <option value="4">Barbecue</option> <option value="5">Bathroom</option> <option value="39">Cloakroom</option> <option value="6">Coffeemaker</option> <option value="7">Cooktop</option> <option value="8">Desk</option> <option value="9">Dishwasher</option> <option value="34">DVD player</option> <option value="35">Elevator</option> <option value="10">Fan</option> <option value="11">Free parking</option> <option value="12">Fridge</option> <option value="13">Hairdryer</option> <option value="33">Hi-fi system</option> <option value="14">Internet</option> <option value="15">Iron</option> <option value="36">Lounge</option> <option value="16">Microwave</option> <option value="17">Mini-bar</option> <option value="18">Non-smoking</option> <option value="19">Paid parking</option> <option value="20">Pets allowed</option> <option value="21">Pets not allowed</option> <option value="22">Radio</option> <option value="37">Restaurant</option> <option value="38">Room service</option> <option value="23">Safe</option> <option value="24">Satellite chanels</option> <option value="25">Shower-room</option> <option value="26">Small lounge</option> <option value="27">Telephone</option> <option value="28">Television</option> <option value="29">Terrasse</option> <option value="30">Washing machine</option> <option value="31">Wheelchair accessible</option> <option value="32">WiFi</option> </select> <a href="#" class="btn btn-default remove_option" rel="facilities2"><i class="fa fa-arrow-left"></i></a> <a href="#" class="btn btn-default add_option" rel="facilities2"><i class="fa fa-arrow-right"></i></a> <select name="facilities" multiple="multiple" id="facilities2" size="8" class="form-control"> </select> </div> <span class="text-danger">{{ errors.facilities?errors.facilities[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="stock" class="col-sm-2 control-label">No of Rooms</label> <div class="col-sm-6"> <input type="number" name="stock" class="form-control" id="stock" v-model="itemsData.stock"> <span class="text-danger">{{ errors.stock?errors.stock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="price" class="col-sm-2 control-label">Price / Night<span class="red">*</span></label> <div class="col-sm-6"> <input type="number" name="price" class="form-control" id="price" v-model="itemsData.price"> <span class="text-danger">{{ errors.price?errors.price[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="start_lock" class="col-sm-2 control-label">Start of maintenance</label> <div class="col-sm-6"> <input type="date" name="start_lock" class="form-control" id="start_lock" v-model="itemsData.start_lock"> <span class="text-danger">{{ errors.start_lock?errors.start_lock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="end_lock" class="col-sm-2 control-label">End of Maintenance</label> <div class="col-sm-6"> <input type="date" name="end_lock" class="form-control" id="end_lock" v-model="itemsData.end_lock"> <span class="text-danger">{{ errors.end_lock?errors.end_lock[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="checked" class="col-sm-2 control-label">Release</label> <div class="col-sm-6" id="checked"> <label class="radio-inline"> <input type="radio" id="Yes" value="1" v-model="itemsData.checked"> <span for="Yes">Published</span> </label> <label class="radio-inline"> <input type="radio" id="No" value="0" v-model="itemsData.checked"> <span for="No">Awaiting</span> </label> <span class="text-danger">{{ errors.checked?errors.checked[0]:"" }}</span> </div> </div> <div class="form-group"> <label for="home" class="col-sm-2 control-label">Home Page</label> <div id="home" class="col-sm-6"> <label class="radio-inline"> <input type="radio" id="Yes" value="1" v-model="itemsData.home"> <span for="Yes">Yes</span> </label> <label class="radio-inline"> <input type="radio" id="No" value="0" v-model="itemsData.home"> <span for="No">No</span> </label> <span class="text-danger">{{ errors.home?errors.home[0]:"" }}</span> </div> </div> <div class="row"> <div class="col-md-2 text-right"> <img :src="image" class="img-responsive"> <label>MEDIAS 0/20 - 20 Remaining</label> </div> <div class="col-md-6"> <div class="choose-file"> <i class="fa fa-folder-open"></i> Choose a file <input type="file" v-on:change="onFileChange" class="form-control"> </div> </div> </div> <!-- <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-default">Add</button> </div> </div> --> </form> </div> </div> </div> </div> </div> </template> <script> import config from '../../../config'; export default { data(){ return{ image: '', items: [], itemsData:{ max_children : '', max_adults : '', image : '', max_people : '', min_people : '', title : '', subtitle : '', alias : '', descr : '', facilities : '', stock : '', price : '', home : '', checked : '', rank : '', start_lock : '', end_lock : '' }, errors: { } } }, methods:{ fetchRoom(){ axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data); }, onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { let reader = new FileReader(); let vm = this; reader.onload = (e) => { vm.image = e.target.result; }; reader.readAsDataURL(file); }, updateItems(e){ axios.put(config.apiDomain+'/Rooms/RoomsEdit/'+this.$route.params.id, this.itemsData).then(response=>{ this.this.itemsData = ""; this.$router.push('/admin/rooms'); }).catch(error=>{ this.errors = error.response.data; }); axios.post(config.apiDomain+'/Rooms/imageupload', {image: this.image, imgurl: config.apiDomain+'/images/rooms'}).then(response=>{ this.errors = ""; }).catch(error=>{ this.errors = error.response.data; }); } }, created: function() { this.fetchRoom(this.$route.params.id); } } </script>

Routes.js:

import FrontEndHome from './components/fontend/Home.vue'; import FrontEndCheck from './components/fontend/Check.vue'; import AdminHome from './components/Backend/Home.vue'; import AdminRooms from './components/Backend/Rooms/Rooms.vue'; import AdminCreate from './components/Backend/Rooms/RoomsCreate.vue'; import AdminRoomsEdit from './components/Backend/Rooms/RoomsEdit.vue'; import AdminRates from './components/Backend/Rates/Rates.vue'; import AdminRatesCreate from './components/Backend/Rates/RatesCreate.vue'; import AdminTaxes from './components/Backend/Taxes/Taxes.vue'; import AdminTaxesCreate from './components/Backend/Taxes/TaxesCreate.vue'; import AdminCoupons from './components/Backend/Coupons/Coupons.vue'; import AdminCouponsCreate from './components/Backend/Coupons/CouponsCreate.vue'; import AdminFacilities from './components/Backend/Facilities/Facilities.vue'; import AdminFacilitiesCreate from './components/Backend/Facilities/FacilitiesCreate.vue'; export const routes = [ { path: '/', component: FrontEndHome }, { path: '/check', component: FrontEndCheck }, { path: '/admin', component: AdminHome }, { path: '/admin/rooms', component: AdminRooms }, { path: '/admin/rooms/create', component: AdminCreate }, { path: '/admin/rooms/edit', component: AdminRoomsEdit }, { path: '/admin/rates', component: AdminRates }, { path: '/admin/rates/create', component: AdminRatesCreate }, { path: '/admin/taxes', component: AdminTaxes }, { path: '/admin/taxes/create', component: AdminTaxesCreate }, { path: '/admin/coupons', component: AdminCoupons }, { path: '/admin/coupons/create', component: AdminCouponsCreate }, { path: '/admin/facilities', component: AdminFacilities }, { path: '/admin/facilities/create', component: AdminFacilitiesCreate } ];

I have to edit and update the values from the above codes.. The router link is directing to the edit page but i am not getting the value that was already in rooms.vue.

I am trying to pass a variable (here, externalVar) to a component, directly when initializing. But I can't find how to do it (probably not understanding documentation well :/ ). What is the correct way to do it?

The initialization :

var externalVar = "hello world" const leftmenu = new Vue({ el: "#left-menu", template: "<CLM/>", components: {CLM}, variableToPass: externalVar });

The component I am initializing here is defined like this (getting back variableToPass in data):

<template src="./template-l-m.html"></template> <script> import draggable from 'vuedraggable'; export default { name: 'leftmenu', components: { draggable }, data () { return { jsonObject: this.variableToPass, } }, [ ... ] </script>

But then , when I am trying to use this.jsonObject, it says that it's undefined. What am I doing wrong ?

I am new with vue.js and electrons and currently created my first app, now i just need to include my external css and js after reading some tutorials the i found out that best way to do this is importing it on my man.js, but failed on that part, is there another way of doing this other that importing it on my main.js? Any suggestion would be great thanks!

Already done below installations.

npm install bootstrap --save npm install jquery --save

My main.js code.

import Vue from 'vue' import axios from 'axios' import App from './App' import jQuery from 'jquery' global.jQuery = jQuery let Bootstrap = require('bootstrap') import 'bootstrap/dist/css/bootstrap.css' import store from './store' import VueRouter from 'vue-router' import test from './components/test' import Users from './components/users' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: __dirname, routes:[ {path: '/', component: Users}, {path: '/test', component: test} ] }); if (!process.env.IS_WEB) Vue.use(require('vue-electron')) Vue.http = Vue.prototype.$http = axios Vue.config.productionTip = false new Vue({ router, template: ` <div id="app"> <ul> <li><router-link to="/">Users</router-link></li> <li><router-link to="/test">Test</router-link></li> </ul> <router-view></router-view> </div> `, }).$mount('#app')

MY error is below, i am using electron-vue to make a native app.

@ multi ./.electron-vue/dev-client ./src/renderer/main.js

I am working on this project which is an open source Vue.js and Firebase based CMS tamiat CMS. I want to integrate an admin section in it. After some search on google I found vue-admin which is vue.js based too.

Now, I am wondering How to integrate the two templates in order to both of them will run on the same vue instance ? is there any possible solution ?

I'm doing a filter page and I need to store the filter name and the filter value, for that purpose, I have a structure like that:

data: { attributes: { checkboxes: [], strings: { keys: [], values: [] }, ...

and the HTML would look like that (btw I'm using Laravel Blade too but that's not relevant here):

... @if ($atribut->type == 'checkbox') <label class="btn btn-default" for="{{ $atribut->tag }}"> {{ $nom }} <input v-model="attributes.checkboxes" class="badgebox" id="{{ $atribut->tag }}" type="checkbox" value="{{ $atribut->id }}"><span class="badge">&check;</span></label> <br> <br> @endif @if ($atribut->type == 'string') @php $nom = obj_array_find(DB::table('literals')->get(), $atribut->nom, 'id')->cat @endphp <input type="hidden" v-model="attributes.strings.keys" value="{{ $atribut->id }}"> {!! Form::text($atribut->tag, null, ['class' => 'form-control', 'placeholder' => $nom, 'v-model' => 'attributes.strings.values']) !!} <br> @endif ...

The question is, is it possible to have a something like that:

<input type="hidden" v-model.key="attributes.strings" value="{{ $atribut->id }}"> {!! Form::text($atribut->tag, null, ['class' => 'form-control', 'placeholder' => $nom, 'v-model.value' => 'attributes.strings]) !!}

the questions should be enough clear :). But I can see that something someone use:

<button @click="function()">press</button>

Someone use:

<button v-on:click="function()">press</button>

But really what is the difference between the two (if exists)

I have a vue application where i am using chart.js and i am trying to dynamically populate the chart from data in a table with a row click event. I have the data displaying in the chart but i am trying to figure out how i could get random colors into it any suggestions would be helpful thank you. This is what the function looks like and the chart.

Function:

var ctx = document.getElementById("myDoughnut"); var myDoughnut = new Chart(ctx, { type: 'doughnut', data: { labels: this.getAnalyticRow[0].rowNames, datasets: [{ data: this.getAnalyticRow[0].rowData, backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 2, }] }, options: { responsive: true, defaultFontColor: '#ffffff', }

Chart:

Not a duplicate: already check this question and this one; didn't get any clue. Some of similar ones are related to Laravel.

Can't figure out what was changed in my project, making [Vue warn]: Cannot find element: #app appear.

The structure:

index.html: hosts the <div id="app">:

[HEADER] <div id="app" v-cloak></div> [FOOTER]

main.js:

import Vue from 'vue'; import Users from './Users.vue'; import App from './App.vue'; // (1) import Home from './Home.vue'; // (2) import VueRouter from 'vue-router'; // (3) Vue.use(VueRouter); const routes = [ {path: '/users', component: Users}, {path: '/', component: Home} ]; const router = new VueRouter({ routes }); new Vue({ el: '#app', router, render: h => h(App) })

App.vue:

<template> <router-view> </router-view> </template> <script> export default { data () { return { message: "Test message" } } } </script>

Home.vue:

<template> [contents] [router-links] </template> <script> [data] [methods] </script>

Whenever I get to the index page, the Vue warn gets displayed. One of attached questions I checked suggested that the DOM element is not ready when scripts are running. Already tried to switch order of imports in main.js (App, Home and VueRouter, as marked in comments), but with no success.

Any idea where to look for solution?

Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by ID.

<tr v-for="item in items" :key="item.id"> <td><a v-bind:href="generateCustomerUrl(item.id)" title="Navigate to Customer page"> {{ item.id }} </a> </td> ...

The function is declared in the module's methods

/** * Private methods for this vue class * **/ methods: { clearSearch() { this.filters.search = ''; EventBus.fire('apply-filters', this.serializedFilter); }, generateCustomerUrl(id) { return "/admin/customers/" + id; } },

However vue js errors saying

vm.generateCustomerUrl is not a function Stack trace:

How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).

Why does filter do not work?

Error says: [Vue warn]: Failed to resolve filter: uppercase.

Not sure why but filter is not working. Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.

I'm trying to emulate an Ajax Response by using random message and status instead.

Link: JSBIN

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="app"> <login-alert ref="refalert"></login-alert> <p> <button @click="showme">Random Alert</button> </p> </div> <script src=" https://unpkg.com/vue"></script> <template id="template-alert"> <div v-if="showAlert"> <div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">&times;</button> <h4>{{title|uppercase}}!</h4> {{message}} </div> </div> </template> <script> Vue.component('login-alert', { template: '#template-alert', data: function() { return { alertType : null, title : null, message : null, showAlert : false } }, methods: { close: function() { this.alertType= null; this.title= null; this.message= null; this.showAlert= false; }, open: function(type, message) { this.alertType= type; this.title = type; this.message= message; this.showAlert= true; } } }); var app = new Vue({ el: '#app', methods: { showme: function() { var randomStatus = ['error', 'warning', 'success']; var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo']; var status = randomStatus[Math.floor(Math.random() * randomStatus.length)]; var message = randomMessage[Math.floor(Math.random() * randomMessage.length)]; this.$refs.refalert.open(status,message); } } }); </script> </body> </html>

I've bound a computed property to the src of an image tag in Vue.js. The code appears to correct, but does not work consistently which is baffling to me. Additionally, switching to the /about page and back to the main books page always properly displays the images.

Any information as to what could be causing this issue would be wonderful!

A hosted version of the app is available here: https://books.surge.sh/

The relevant code for the book-item component.

The full Github repo.

The code generating the book component and image src is as follows:

<template> <article class="book-item"> <img :src="imgSrc" class="image"> <div class="meta"> <div class="name">{{ book.title }}</div>* <div class="author">{{ book.author }}</div> </div> <div class="description"> <p v-html="book.description"></p> </div> </article> </template> <script> export default { props: ['book'], computed: { imgSrc() { return `/static/img/${this.book.image}`; } } }; </script>

Partially displayed book covers on initial load:

I am trying to make a type of progress bar to track a percentage of tasks completed. I want to v-bind:styles and pass it {width: dynamicWidth + '%'} in order to control the progression of this bar. So far I have created a computed variable that will return the percentage complete I want to bar to display, and I have set up my dynamic style in the data object

export default{ data: function () { return { numQuotes: dataBus.numQuotes, numberA: 30, barWidth: { width: this.barWidthCalculated +'%' } } }, computed: { barWidthCalculated: function(){ return this.numQuotes * 10; } } }

I also added an element to the DOM to see what was happening.

<div id="trackerBar"> <div id="trackerBarActual" v-bind:style="barWidth"> <h2>{{numQuotes}}/10</h2> <p>{{barWidthCalculated}}</p> </div> </div>

My bar stays fixed at 100%, i dont see any interpolation on the DOM. I also established another NUMBER variable in my data section and attempted to pass that to my width property, but still no change, and no rendering on the DOM. However if I pass any other elements in my styles object such as

color: 'red'

Those changes take place. Also if I pass my styles object a number directly ie...

barWidth: { width: 50 +'%' }

It displays correctly on the DOM.

What am I missing/doing wrong?

I have a Laravel / Vue app that I'm building and I've run into a bit of a snag. I have been able to successfully create individual stand-alone components, however when I try to nest a stand-alone component into another component, only the nested component shows up. A bit of code:

CompanyLogo.vue

<template> <figure class="company-logo" :style="{ width: size, height: size, backgroundImage: `url(${src})` }"></figure> </template>

LogoUploader.vue

<template> <div class="logo-container"> <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> </div> <div class="logo-uploaded-details"> <p>Last updated: {company.logo.last_updated}</p> <button class="file-browse-btn">Upload Image</button> </div> </template>

What's happening is that when in company.blade.php I simply have

<logo-uploader></logo-uploader>

The app compiles and loads, however only the CompanyLogo shows up on the screen. The entire markup for the logo-uploaded-details section isn't rendered at all.

I have tried adding a require for the CompanyLogo component to the registration for the LogoUploader component, but that didn't work either.

If I split out the components they both show up. The issue is only once they're nested.

Any ideas?

So I'm new to Vuejs and doesn't know anything about npm, node, and other javascript apps.

I wanted to switch to VueJS so that I can take away from JQuery. Been using AdminLTE for my projects before.

I wanted to use vue-admin now since it seems to address all of my needs. However, I have specific work area situations that seems to hinder learning Vue and other JS apps, these are:

1. The workspace folder (development) where I'm creating applications is hosted in the production server (Windows Server).
2. I think NodeJS isn't installed in the server
3. Adobe Coldfusion is used. I don't have a local server, so the production server is used when developing.

Question:

1. Will the production server run the app built with vue-admin even if the production server doesn't have NodeJS installed? (I have NodeJS locally).
2. I need to use Coldfusion for the logic of the application, specifically I'm using CFWheels right now and vue-admin for Frontend and UX. Is it possible? The application I'm making is closely related to parts of an ERP system.
3. Any pointers on how I could do this?

Basically I want to be able to access some centralized data by setting up a dataBus as a vue instance object, and then access and tweak this data from different components.

I cant seems to access by data from my componenets, even basic string interpolation is not getting rendered to the DOM.

export const dataBus = new Vue({ data: { numQuotes: 4, stringVar: 'Hellow There' } });

I also tried setting up my data as the return of the function data(). But being as my data bus is an actual vue instance I don't think this is correct. (I could be wrong). Following is the component in which I import my dataBus and try to output my data.

<template> <div> <h1>Quotes Added</h1> <div id="trackerBar"> <div id="trackerBarActual"> <h2>{{numQuotes}}/10</h2> </div> </div> </div> </template> <script> import { dataBus } from '../main.js'; export default{ } </script>

I am getting the following error: Property or method "numQuotes" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Am I missing something obvious? Is it even possible to access data this way? Or do I have to access it as a method?

Example JSP :

<!DOCTYPE html> <html lang="en-US" > <head> <script src="vue.min.js"></script> </head> <body> Sample heading <div class="container" id="mainDiv"> {{firstName}} </div> </body> <script type="text/javascript"> Vue.config.devtools = true; var app = new Vue({ el: '#mainDiv', data: { firstName: 'name', lastName: 'lName', description: 'desc' } }); </script> </html>

The following options are tried :

1. If the above file is executed using .html, it works as expected. Chrome Dev tools detects that its a Vue application
2. If the above file is executed using .jsp, it works as expected. Chrome Dev tools detects that its a Vue application(http://localhost:8080/example.jsp)
3. If the above file is executed using .jsp and the jsp is loaded through form submission like http://localhost:8080/example.do and the success is redirected to example.jsp, it doesn't work.

Output in case 1 and 2 :

Sample heading
name

Output in case 3 :

Sample heading.

• Ideally its supposed to display "name" as well.
• If we do inspect element, it shows "".
• In inspect element, If I select "app.firstName" I am able to see the value "name"
• lets say, if I add "", Vue is still unable to display component's template. If I do app.$ref -- {} in case 3 and app.$ref -- {container:...} in case 1 and 2

Has anyone tried similar scenarios ? I was wondering what exactly is making Vue to not load this data.

Any help in resolving this issue is appreciated.

Thanks in advance

confusing title, I wasn't sure how else to write it. So i have a component and it accepts a prop which is an array. What i am looking to do, is on array.push() i would like a function to trigger for that array element.

so it is an alert toast message, and i want it to stay up for 3 seconds. so i was thinking about something like

watch: { arrayObj: function () { let self = this setTimeout(function() { self.dismiss(this.id) }, 3000) } }

but i think i may be missing something here. How do i get the latest pushed object's reference so i make sure the dismiss method calls the correct alert? Is watch even the correct way to go about this?