Software

Home.vue:

<form class="book-room" action="#"> <div class="col-md-3"> <div class="form-left-search-book"> <p>Room Type</p> <select v-model="roomtype" class="form-control"> <option class="form-control size-font" v-for="room in items">{{ room.title }}</option> </select> </div> </div> <div class="col-md-3"> <div class="form-date-book-search date-space-left"> <p>Arrival Date</p> <input class="form-control" id="arrive" v-model="from" type="text"> </div> </div> <div class="col-md-3"> <div class="form-date-book-search date-space-right"> <p>Departure Date</p> <input class="form-control" id="depart" v-model="to" type="text"> </div> </div> <div class="col-md-2 text-left"> <div class="form-left-search-submit"> <router-link :to="{ name: 'check', params: { roomtype: this.roomtype, from: this.from, to: this.to }}" ><button class="btn btn-info" type="submit">Check</button></router-link> </div> </div> </form>

Route.js:

{ path: '/check/:roomtype/:from/:to', name: 'check', component: FrontEndCheck },

Jquery:

$(document).ready(function () { var date = new Date(); var currentMonth = date.getMonth(); var currentDate = date.getDate(); var currentYear = date.getFullYear(); $('#arrive').datepicker({ minDate: new Date(currentYear, currentMonth, currentDate), dateFormat: 'dd/mm/yy' }); $('#depart').datepicker({ minDate: new Date(currentYear, currentMonth, currentDate), dateFormat: 'dd/mm/yy' }); });

Here i am having a form filling up room type, arrival , departure date and there is a check named button in which if i click over it, then it will redirect to the next page by taking up the room type, arrival , departure date that have been selected..

When i use type="date" <input class="form-control" id="arrive" v-model="from" type="date"> and selecting from bootstrap datepicker, everything works fine and no issue with that but i cant use that datepicker because there the disabling of past date was not available, so here i need to implement a jquery for it, in which i changed the type="text" and gave it like <input class="form-control" id="arrive" v-model="from" type="text"> and function i have mentioned in jquery code, it is showing the error,

[vue-router] missing param for named route "check": Expected "from" to match "[^\/]+?", but received ""

I searched a lot but unable to find a solution for it, kindly make a help for me to fix this issue.

How could a child component pass its value to the parent component? Here is my child component:

Javascript:

new Vue({ el: '#table-list', data: { tableList: ['Empty!'], tableSelected: "" }, methods: { getTableList() { axios .get('/tables') .then(tableList => { this.tableList = tableList.data; }) .catch(e => console.warn('Failed to fetch table list')); }, selectTable(table) { this.tableSelected = table; } }, mounted() { this.getTableList(); } });

HTML:

<div id="table-list"> <p v-for="table in tableList"> <i class="fa fa-table" aria-hidden="true"></i>&nbsp; <span class="text-primary" v-on:click="selectTable(table)"> {{ table }} </span> </p> </div>

When on click, selectTable is called, I want to show the value in its parent component? i.e I need to pass tableSelected property to the parent component. How could I do this?

I'm getting this error for each html tag of Vuetify. I installed Vuetify using

npm install --save-dev vuetify

In my main.js I have :

const Vue = require("vue"); const Vuetify = require("vuetify"); const tracksList = require("./track-list.vue"); Vue.use(Vuetify); trackList = new Vue({el: "#track-list", template: "<tracksList/>", components: {tracksList}});

The file track-list.vue is :

<template src="../templates/track-list-component.html"></template> <script src="./track-list.js"></script>

In my template track-list-component.html, here is the part which uses Vuetify :

<div class="track-name-row" v-on:click="expandTrack(project.structure.tracks.indexOf(track))" @contextmenu="show"> <li class="track-color-viewer"></li> <span>{{"Track "+project.structure.tracks.indexOf(track)}}</span> <img class="item-view" src="../assets/img/ic_view.svg" alt="view"> </div> <v-menu offset-y v-model="showMenu" :position-absolutely="true" :position-x="x" :position-y="y"> <v-list> <v-list-tile> <v-list-tile-title>test</v-list-tile-title> </v-list-tile> </v-list> </v-menu>

The track-list.js is a simple Vue component :

module.exports = { name: "track-list", components: { [ ... ] }, data() { return { [ ... ] }; } }

For importing Vuetify, is there other things to do than installing Vuetify with npm and using Vue.use(Vuetify) in main.js? I am a bit lost and sad, this lib seems to be really great.

I am trying to write a post api in nodejs and using vuejs as front end frame work and using vue-resource to access apis . This is my submit function on the front end side.

validateBeforeSubmit() { var self = this; this.$validator.validateAll().then(result => { if (result) { self.data = self.name; console.log(this.data) this.$http.post('/api/add_level',self.data).then(function(res){ this.status = res.body console.log(this.status); this.largeModal=false; // eslint-disable-next-line alert('From Submitted!'); }) return; }

This my code on the server side.

app.post('/api/add_level',function(req,res,err,data){ console.log(data); })

How to mapping the JSON Object with the variable? I am not sure that my coding is correct or not. I just begin study in Vuejs. Please see my coding I want to map jSON data to the 'country' variable.

var appZone = new Vue({ el: '#el', data() { return { country: [], shoppingItems: [ {name: 'apple', price: '10'}, {name: 'orange', price: '12'} ] } }, mounted() { axios.get('/wp-json/tour-api/v1/search/11361') .then(function (response) { console.log(response); this.country = response.json(); }) .catch(function (error) { console.log(error); }); } }) <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="el"> <ul> <li v-for="item in country"> {{ item.country_id }} - {{ item.title }} </li> </ul> </div>

Here is my JSON data

I am searching a solution where I can replace a object content with other in a array of objects.

The thing is, I don't know what my function will pass, so I can't pass the values inside as keys directly, so the reference won't be copied, is there any way I can assign the value directly without passing the reference? I know that objects pass references and not values, but is there a way to do that?

I tried two ways:

state.document["atributes"].splice(state.document["atributes"][state.currentIndex],1,section);

and

state.document["atributes"][state.currentIndex] = section

where my state.document["atributs"] is my array, and the state.currentIndex the index where I want to replace the element inside my array.

what happens at the moment is that my object can be a Table a paragraph etc.

if the objects are the same it replaces the content :/

Any help with this? Thank you

I have my project written in Laravel + Vue.js. (It is not my project, but I have to improve it. I can not show code because I have NDA so i will only ask. It is API in laravel + front in laravel + vue. I committed that project, updated two .env's and installed it using: composer update npm install php artisan serve

But there is problem because where I am on the page (127.0.0.1:8000) I see blank page. Here's some console:

When I am doing 127.0.0.1:8000/js/app.js I see:

That doesn't works even when I have 777 chmod's on all project.

And command npm install every time says "114 installed 10 updated". Why this notice is not updating to 0?

Can u help me? What can I try?

<select v-on:change="WebserviceCall()"> <option v-for:="option in options"> </option> </select>

Actually the on-change is triggered when the options are created in the v-for and i dont want this to happen, is there another semantic option or should i use a some kind of VueJSIsReady function in my javascript ?

There are two teams, each has a logo and name, and for the first team, we display the logo, and then the name, and for the second, the name, and then the logo. I wanted to put the logo and name in the component, and handle this situation like this :

<div class="team_container"> <template v-if="isTeam1Flag"> <img :src="/logo_1.png" alt="Logo Team 1"> <span >Team 1</span> </template> <template v-else> <span >Team 2</span> <img :src="/logo_2.png" alt="Logo Team 2"> </template> </div>

Can you tell me if there is a better solution for this task?

I have the following line of code in my .vue template for an input field component which I want to check for whether an input field is a checkbox and bind a class on the input field if it is true.

In the component it looks like this:

<input :type="type" class="o-pf-input" :class="!isCheckbox ? 'o-pf-input--cbx' : ''" :placeholder="placeholder" :name="placeholder" :value = 'value' @input="value = $event.target.value">

Where it has :class="!isCheckbox ? 'o-pf-input--cbx' : ''"

in my data option I have this:

data: function() { return { value: '', checkbox: 'o-pf-input--cbx', isCheckbox: false } },

So it is kind of working but it applies the class to all input fields which is what I don't want to achieve. It should only add the class when the attribute type is a checkbox.

I have a problem, I really confused about how to get value from form binding vue js. I have tried --> https://vuejs.org/v2/guide/forms.html#Select. But I always getting error such as --> Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. What's wrong with my code ?

Here is my code :

data : function() { return { data : { options : {}, selected : '' } }; }, methods : { Search : function(){ var vm = this; var types = [ { "id" : "id", "value" : "ID" }, { "id" : "title", "value" : "Title" }, { "id" : "category", "value" : "Category" }, { "id" : "username", "value" : "Nama User" } ]; vm.data.options = types; console.log(vm.data.selected); } }

Here is my html code :

<select v-model="selected" class="form-control sl"> <option v-for="option in data.options" v-bind:value="option.id"> {{ option.value }} </option> </select>

I am using vue-date-range date picker here i am using disabledStart and disabledEnd props but its not disabling date on view.for disabling date it required an object i am passing it but it doesn't work.I don't know what was the correct object format for disabling the dates.

Any help would be appreciated Plugin link https://www.npmjs.com/package/vue-date-range

Here is HTML

<div class="form-group form-group-lg"> <label>When is it required?</label> <daterange class="calendar" :sync-range.sync="range" :disable-days-before-today="disableDaysBeforeToday" :days-disabled-start="disableStart" :days-disabled-end="disableEnd" :lang="lang" @change="onChange"> </daterange> </div>

JS

<script> import { DateRange } from 'vue-date-range'; export default { data() { return { lang: 'en', disableDaysBeforeToday: true, disableStart: { startDate:moment()}, disableEnd: { endDate: moment().add(7, 'days') }, range: {} } }, components: { 'daterange': DateRange }, methods: { onChange(range) { console.log("START", range.startDate._d); console.log("END", range.endDate._d); }, disable() { console.log("on button click disable dates"); this.disableStart._d = new Date('2017-08-25').toString() } } } </script>

After that I uploaded site in xampp's virtualHost axios methods stopped working.(but site is working well)

httpd-vhosts:

NameVirtualHost *:80 <VirtualHost *:80> DocumentRoot C:\xampp\htdocs\zbudWew\public ServerName localhost <Directory C:\xampp\htdocs\zbudWew\public> Order allow,deny Allow from all </Directory> </VirtualHost>

.env:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=zbudwew DB_USERNAME=root DB_PASSWORD=

example axios method:

axios.post('api/news/', this.info).then(response => { this.news.unshift(response.data.info); this.info = {title: '', body:''}; console.log(response.data); }, response => { this.errors = response.data; });

On my localhost:8000 address site and adding content is working good, but if I am trying add content on my 192.168.0.199 address I am getting errors:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined" found in ---> <Info> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\Info.vue <NewsManagement> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\NewsManagement.vue <Root>

Which is werid, because:

axios.get('api/news').then(response => { this.news = response.data.news; });

is working correctly. Could you guys give me an advice how to solve this?

I have a list as component and it contains hidden popup like facebook. For example you click any item on list, and it shows popup about the item here is my interface that I mentioned

It runs properly with v-if / v-show attributes. But works only on item list. If the user wants to click any location on the interface. I'm checking like following lines:

popupListener(event) { let element = $(event.target), allCard = $(document).find('.popup'), pointer_popup = element[0].closest('.popup'), pointer_card = element[0].closest('.card-item'); if ((!pointer_popup && !pointer_card) || (pointer_popup && pointer_card)) { allCard.hide(); } }

Also this listens in ready method of VueJS. This is not good solution. I wonder and look for better solution with VueJS.

I have just started to learn VueJS 2 and the more questions I have the harder it becomes.

The idea is that I have a sample problem with an array of objects, where I want to sort the array by "votes" property, which can be dynamically updated for each separate element. I want to sort my list by votes dynamically. Thus the question is how can I do that without doing weird code.

In angular you will do something like

for candidate in candidates | orderBy: 'votes'

but in here I could of though only of something like

v-for="(value, index, key) in sorted_candidates"

where in .js I'll have

computed : { sorted_candidates() { return this.candidates.sort((a, b) => { return b.votes - a.votes;}); } }

So my question would be if there is a more elegant way to solve this problem? Note: I am sorting on object property.

I am using vuejs with vuetify a material design support for vuejs, but I am confused as to how I can add custom css styles to material design without breaking a convention of the material design itself.

It is like bootstrap where we can call .row{} and override the styling or does it differ in some ways.

How can I loop over data set via ajax in my component methods? The problem is that when I try to call a method to perform the loop on component mounted(), the data isn't there yet. How can I tell my vue component to wait for the ajax data to arrive to execute the function? The parent makes the ajax call, so I can't stick it in the .done() function.

Vue.component('sidebar', { props: ['people'], template: ` <div id="sidebarContain" v-if="this.people"> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id"> {{person.first_name + ' ' + person.last_name}} </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, displayName() { //this is the function I want to run when ajax data is done and passed from parent to child for (var i = 0; i < this.people.length; i++) { console.log(this.people[i]); } } }, mounted() { this.displayName(); } }); var app = new Vue({ el: '#main', data: { people: [] }, methods: { loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants/' + event_id }).done(data => { this.people = data; }); }, setRefresh() { setInterval(() => { console.log("Getting People"); this.loadPeople(); }, 10000); } }, mounted() { this.loadPeople(); this.setRefresh(); } }); <div id="app"> <sidebar :people="people"></sidebar> </div>

While looping on array of sales , i need to capture the object of which salesPerson === "bar" and print its sellValue outside the v-for block.

Of course i can't access the array in hard-coded way. i have to assume that the position of the object i'm looking for is random.

also, i can't add another loop on top of the one loop that already exist here. (v-for is a loop obviously).

i need way to do achieve it.

here is an example component:

<template> <div id="app"> <!-- i need to print here the sellValue of 'bar' --> <p v-for="(sell,index) in sales" :key="index">{{sell.sellValue}}</p> </div> </template> <script> export default { name: 'app', data() { return { sales: [ { salesPerson: 'foo', sellValue: 1 }, { salesPerson: 'bar', sellValue: 2 } ] } } } </script>

I'm trying to install vuejs-uib-pagination on laravel 5.4... (https://github.com/sant123/vuejs-uib-pagination)

1. npm install vuejs-uib-pagination

2. Added the following codes to /resources/assets/js/app.js

3. npm run dev

4. Added HTML and scripts

On browser, I got an error: [Vue warn]: Unknown custom element: <uib-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Some codes located at /src/types/index.ts like Vue.component("uib-pagination",...

I think I need to import these stuffs, but I'm not familiar with 'webpack' or 'mix'. Where will be the proper way to import the codes?

I have an element in my html code

<div class="my_div"> </div>

Now i want to alert when user scrolled to this element.How can i do that using Vue considering that my_div is in the center of the page?