Feed aggregator

I have the following components:

• Users

• Addresses

Inside the Users component I have the following:

<script> export default { data() { return { address: null } } } </script>

Inside the view, I have the following (calling the child component)

<partials-addresses source="/users" title="Users Address" @addressChanged="address = $event" placement="address" />

This is then sent to an endpoint (using axios):

submitForm: function() { var vm = this; console.log(vm.address); // is fine, returns the object axios.post(`/users`, { address: vm.address }); }

The issue is that when I'm outputting the data on the endpoint side, I'm just getting an empty array. I'm using another child component and this sends data through fine, it's just the address one.

Could it be because of the way the data is formatted?

I'm trying to implement dependent selects using Vue.js (last version), but my app logic breaks when I have a few v-for and v-if. I can't understand where is my mistake. Please, help me solve the problem.

Click Toggle !pickup and try to change District select and you'll see issue. You can also delete div with v-if="!cartPage.pickup" or change v-if to v-show, and you can see, everything is working..

Here is my code

jsFiddle link

var vm = new Vue({ el: '#app', data: { userInfo: { loggedIn: false, }, cartPage: { pickup: false, restaurants: {}, currentCity: '', currentDistrict: '', currentRestaurant: '', }, }, methods: { setDefaultDistrict: function() { this.cartPage.currentDistrict = this.cartPage.currentCity.districts[0]; this.setDefaultRestaurant(); }, setDefaultRestaurant: function() { this.cartPage.currentRestaurant = this.cartPage.currentDistrict.restaurants[0]; }, }, }) vm.cartPage.restaurants = [{ city: "City 1", districts: [{ districtName: "City 1 district 1", restaurants: [{ placeName: "City 1 district 1 Restaurant 1", name: 'City 1 district 1 Restaurant 1', address: 'City 1 district 1 Restaurant 1', hours: '10:00–22:00', }, { placeName: "City 1 district 1 Restaurant 2", name: 'City 1 district 1 Restaurant 2', address: 'City 1 district 1 Restaurant 2', hours: '10:00–20:00', }] }, { districtName: "City 1 district 2", restaurants: [{ placeName: "City 1 district 2 Restaurant 1", name: 'City 1 district 2 Restaurant 1', address: 'City 1 district 2 Restaurant 1', hours: '12:00–22:00', }, { placeName: "City 1 district 2 Restaurant 2", name: 'City 1 district 2 Restaurant 2', address: 'City 1 district 2 Restaurant 2', hours: '12:00–22:00', }] } ], }, { city: "City 2", districts: [{ districtName: "City 2 district 1", restaurants: [{ placeName: "City 2 district 1 Restaurant 1", name: 'City 2 district 1 Restaurant 1', address: 'City 2 district 1 Restaurant 1', hours: '10:00–22:00', }, { placeName: "City 2 district 1 Restaurant 2", name: 'City 2 district 1 Restaurant 2', address: 'City 2 district 1 Restaurant 2', hours: '10:00–20:00', }] }, { districtName: "City 2 district 2", restaurants: [{ placeName: "City 2 district 2 Restaurant 1", name: 'City 2 district 2 Restaurant 1', address: 'City 2 district 2 Restaurant 1', hours: '12:00–22:00', }, { placeName: "City 2 district 2 Restaurant 2", name: 'City 2 district 2 Restaurant 2', address: 'City 2 district 2 Restaurant 2', hours: '12:00–22:00', }] } ], }, { city: "City 3", districts: [{ districtName: "City 3 district 1", restaurants: [{ placeName: "City 3 district 1 Restaurant 1", name: 'City 3 district 1 Restaurant 1', address: 'City 3 district 1 Restaurant 1', hours: '10:00–22:00', }, ] }, ], }, ] vm.cartPage.currentCity = vm.cartPage.restaurants[0]; vm.cartPage.currentDistrict = vm.cartPage.currentCity.districts[0]; vm.cartPage.currentRestaurant = vm.cartPage.currentDistrict.restaurants[0]; .custom-radio { display: block; margin: 10px; border: 1px solid #000; cursor: pointer; } <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"> <div class="cart__delivery-and-pay"> <h2 class="cart__delivery-and-pay--title">Heading</h2> <div class="delivery__block"> <div class="delivery__block-header cf"> <div class="delivery__variants"><span @click="cartPage.pickup = false" v-bind:class="{ 'active': !cartPage.pickup }" class="courier custom-radio">Toggle pickup</span><span @click="cartPage.pickup = true" v-bind:class="{ 'active': cartPage.pickup }" class="pickup custom-radio">Toggle !pickup</span></div> </div> <div class="delivery__cols"> <!-- if delete this everything is working! --> <div v-if="!cartPage.pickup" class="delivery__col delivery__address"> <div class="delivery__col-heading">Address: <div class="custom-select__wrapper item__option"> <select class="custom-select"> <optgroup label="Choose city"> <option value="1" v-for="singleCity in cartPage.restaurants">{{ singleCity.city }}</option> </optgroup> </select> </div> </div> </div> <!-- if delete this everything is working! --> <div v-if="cartPage.pickup" class="delivery__col delivery__address"> <div class="delivery__col-heading">Address: <div class="custom-select__wrapper item__option delivery__address-city"> <select v-model="cartPage.currentCity" @change="setDefaultDistrict" class="custom-select"> <option v-for="singleCity in cartPage.restaurants" v-bind:value="singleCity" v-bind:selected="cartPage.currentCity.city == singleCity.city ? true : false">{{ singleCity.city }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start">District <div class="custom-select__wrapper item__option"> <select v-model="cartPage.currentDistrict" @change="setDefaultRestaurant" class="custom-select"> <option v-for="singleDistrict in cartPage.currentCity.districts" v-bind:value="singleDistrict">{{ singleDistrict.districtName }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start">Restaurant: <div class="custom-select__wrapper item__option"> <select v-model="cartPage.currentRestaurant" class="custom-select"> <option v-for="singleRestaurant in cartPage.currentDistrict.restaurants" v-bind:value="singleRestaurant">{{ singleRestaurant.placeName }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start delivery__row--last-row"><span v-if="cartPage.currentRestaurant" class="delivery__row-note">{{ cartPage.currentRestaurant.address }}, {{ cartPage.currentRestaurant.hours }} ч.</span></div> </div> </div> </div> </div> </div>

I’m facing a problem in vue route. The problem is vue route is not render data property 'people' of vue js instance. Please guide me what is the problem here. Here is my code.

Console Error:

Property or method "people" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

and also my running code available here:JsFiddle Code

<body> <div id="vue-app"> <router-link to='/create'>Create employee</router-link> <!-- router outlet --> <router-view></router-view> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script type="text/x-template" id="create_template"> <div> <div v-for="person in people "> <p v-text="person.name"></p> </div> <p>create display here </p> </div> </script> <script type="text/javascript"> const create_or_edit = { template: '#create_template' }; const routes = [ {path: '/create', component: create_or_edit,}, ]; const router = new VueRouter({ routes: routes, }); const app = new Vue({ router: router, data(){ return { people: [ {name: "Ali"}, {name: "Kamran"}, {name: "Qaiser"}, ], } } }).$mount('#vue-app') </script>

I am in the need of edit and update the values using vue.js,

For which i have used the edit to get the values and i am able to edit but whereas i am unable to update .

Update Click button:

<span><button type="submit" @click="updateItems" 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>

Script of Edit:

<script> import config from '../../../config'; export default { data(){ return{ items: [], itemsData:{ room_id : '', start_date : '', end_date : '', package_id : '', price : '', child_price : '', discount : '', discount_type : '', people : '', price_sup : '', fixed_sup : '', tax_id : '', taxes : '' }, errors: { } } }, created: function() { this.fetchRates(this.$route.params.id); }, methods:{ fetchRates(id){ axios.get(config.apiDomain+'/Rates/'+id+'/edit').then((response)=>this.itemsData = response.data); }, updateItems(e){ axios.put(config.apiDomain+'/Rates/'+this.$route.params.id, this.itemsData).then(response=>{ // this.this.itemsData = ""; this.$router.push('/admin/rates'); }).catch(error=>{ this.errors = error.response.data; }); } }, mounted() { axios.get(config.apiDomain+'/Rates').then((response)=>this.items = response.data); } } </script>

Update Controller:

public function update(Request $request, $id) { echo $id; return 'hi'; $rows = Rates::findOrFail($id); $this->validate($request, [ 'room_id' => 'required', 'start_date' => 'required', 'end_date' => 'required', 'price' => 'required' ]); $input = $request->all(); $rows->fill($input)->save(); Session::flash('flash_message', 'Rates successfully Updated!'); }

It was throwing the error as,

XMLHttpRequest cannot load http://localhost/booking/booking-api/public/Rates/1. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

and also,

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at eval (RatesEdit.vue?5784:221)

Kindly give me a better solution that solves my issue.. I am able to do edit but unable to update the edited values by clicking save button..

I am new to Vue.js and i'm building a rather simplistic chat from a tutorial and I got this error:

TypeError: Cannot read property 'message' of undefined

I did set message as a prop but I can't understand why it's undefined.

chatMessage.vue

<template lang="html"> <div class="chat-message"> <p>{{ message.message }}</p> <small>{{ message.user }}</small> </div> </template> <script> export default { props: ['message'] } </script> <style lang="css"> .chat-message { padding: 1rem; } .chat-message > p{ margin-bottom: .5rem; } </style>

app.js

require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.vue')); Vue.component('chat-message', require('./components/ChatMessage.vue')); Vue.component('chat-log', require('./components/ChatLog.vue')); Vue.component('chat-composer', require('./components/ChatComposer.vue')); const app = new Vue({ el: '#app' });

chat.blade.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chat!</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <div id="app"> <h1>Chat Room</h1> <chat-message></chat-message> <chat-log></chat-log> <chat-composer v-on:messagesent="addMessage"></chat-composer> </div> <script src="js/app.js" charset="UTF-8"></script> </body> </html>

Please note that vue is connected via Laravel, all is working fine, yet i'm getting this error which i'm trying to find out how or where would I define message.

Thanks, Bud

i'm trying to change variables dynamically so as not to use too many switch statements. i was hoping to do this:

this.variable1 = 2 this.variable2 = 3 var array1 = [this.variable1, this.variable2]

and then later do

array1[0] = 25 array1[1] = 12 console.log(array1[0]) //would output 25 console.log(array1[1]) // would output 12

of course it this is not what happens which is normal but how can i achieve that dynamically? There must be a way i'm sure.

My view blade like this :

<a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')"> Click here </a> <data-modal id="modal-data"></data-modal>

If the button clicked, it will call dataModal component (In the form of modal)

dataModal component like this :

<template> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <!-- modal content data --> <div class="modal-content modal-content-data"> <form id="form"> <div class="modal-body"> ... </div> ... <button type="submit" class="btn btn-success" @click="add"> Save </button> ... </form> </div> <!-- modal content success --> <div class="modal-content modal-content-success" style="display: none"> <div class="modal-body"> ... </div> </div> <!-- modal content failed --> <div class="modal-content modal-content-failed" style="display: none"> <div class="modal-body"> ... </div> </div> </div> </div> </template> <script> export default{ ... methods:{ add(event){ const data = { ... } this.$store.dispatch('add', data) .then((response) => { if(response == true) this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-success') else this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-failed') }) .catch(error => { console.log('error') }); } } } </script>

If response = true then modal with class = modal-content-success will appear

If response = false then modal with class = modal-content-failed will appear

I want if response = false, modal with class = modal-content-data still showing. So modal with class = modal-content-failed appears in modal with class class = modal-content-data

How can I do that?

How to order that when response = false, modal with class = modal-content-data still appear?

How does one render vnodes from a parent component of its child components. I have a render function that is looping through an array of children found in this.$slots.default. The aim is to wrap the children in li tags.

The problem is that the children components don't render and I get empty li tags. What am I missing here and where can the solution be found in the documentation. The Fiddle Can be found here And the embedded code is below.

// Parent component const MyParent = Vue.component('my-parent', { render: function(createElement) { var parentContent = createElement('h2', "These are Parent's Children:") var myChildren = this.$slots.default.map(function(child) { //console.log("Child: ", child) return createElement( 'li', child ) }) var content = [].concat(parentContent, myChildren) return createElement( 'div', {}, content ) } }); // Child Component const MyChild = Vue.component('my-child', { template: '<h3>I am a child</h3>' }); // Application Instance new Vue({ el: '#app', components: { MyParent, MyChild } }) <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <my-parent> <my-child></my-child> <my-child></my-child> </my-parent> </div>

Template html

<div class="item" v-for="n, index in teamRoster"> <span> {{ getFantasyScore(n.personId) }} </span> </div>

Method

getFantasyScore(playerId) { if(playerId) { axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + playerId) .then( (response) => { if( response.status == 200 ) { console.log(response.data.total) return response.data.total; } }); } }

I'm trying to display the returned data to DOM but it doesnt display anything. But when I try to console log the data is displays. How can I be able to display it. What am I missing?

I have a a modal that would submit a file without using an actual form, I am using FormData, so upload it to server. This will work if csrf token is disabled, my question is, how would I send the csrf token manually? I am using slim,axios and vuejs.

var formData = new FormData(); formData.append('fileme',file); axios.post(uyab.uploadUrl, formData,{ headers: { 'Content-Type': 'multipart/form-data', 'csrf_name': uyab.csrf_name, 'csrf_value': uyab.csrf_value, 'Accept': 'application/json', }, })

But this will return error of failed csrf token

I created a function that would fetch csrf name and values from specific routes, and thus returning with correct values, the only problem is I dont know how to make it work in vuejs using spa approach

<template> <div> <v-container fluid id="main"> <v-card class="white lighten-4 elevation-3"> <li v-for="stop in stop_name_arr"> {{stop}} </li> <direct_bus_travel_time_in_between_stops> </direct_bus_travel_time_in_between_stops> <direct_bus_travel_distance_in_between_stops> </direct_bus_travel_distance_in_between_stops> </v-card> </v-container> </div> </template>

i have two components direct_bus_travel_time_in_between_stops & direct_bus_travel_distance_in_between_stops to be loaded after <li v-for="stop in stop_name_arr">{{stop}}</li> has been executed completely .

Is there any way to append the components dynamically inside a function to load it when I want it to load ?

How do I access an element from within the mounted function in a VueJS instance.

When I try the following, it tells me that the element is undefined. When I see the DOM it is there. Could this be a case where the element is not rendered before I try to reference it?

document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});

component image

On server-side this good worked. But in browser - I have message error

error image

Pls help me

Thank you!

I have just installed VueJS on my website and I'm getting tonnes of console errors like the one above. I am not trying to create any Vue components (yet) but my website does contain a number of custom HTML tags.

Does Vue treat any custom HTML tage (e.g. not one in the HTML spec) as something it needs to compile and will it always complain about tags it doesn't recognise?

Is it possible to switch theses warning off?

Please note: This is not a duplicate of Vue js unknown custom element

The user there is actually trying to create a Vue component.

I had been doing something like this for a long time:

@Component({ template, name: 'Something' }) export class Something extends Vue { someParam: string; constructor() { super(); this.someParam = this.$route.params.someParam; } }

I'm not which one affected the change, but since upgrading to:

"vue": "~2.4.2", "vue-router": "~2.7.0", "typescript": "~2.4.2",

Now I get this error:

[Vue warn]: Error in data(): "TypeError: Cannot read property '_route' of undefined" vue.esm.js:566 TypeError: Cannot read property '_route' of undefined

None of my code changed, so what changed in Vue or TypeScript (or anything else), why did this stop working, and how can I fix it?

I started moving these to beforeCreate() but they are all over the application, so it's a significant change if I can't find a fix that doesn't require a major refactor.

Thanks

When I try get data "Id" of my list the script get Id wrong.

I need Id that field. but my return is wrong

I stay use a hidden because I not how get that id without use hidden imput

</tr> <tr v-for="todo in todos"> <td>{{todo.filial}} Id {{todo.Id}}<input type="hidden" name="Id" id="Id" v-mode="todo.Id"></td> Deletar: function (event){ alert($('#Id').val()); /*$.post( "Salva.php", { textoDoFormulario: this.todosView.Id, status: "delete" } ); $.get('t2576.php', function(resp) { todosView.todos = resp; }, "json");*/ },

I tried to integrate flash messaging using the session variable. The problem is that when I integrated Vue, the window stopped receiving the event.

From the controller:

return redirect('home') ->with('flash', 'Signed');

And on my app.js:

window.Vue = require('vue'); window.events = new Vue(); window.flash = function (message) { window.events.$emit('flash', message); };

I think the important part of the Vue component is this line here:

created() { window.events.$on( 'flash', (message) => this.flash(message) ); }

If I type flash('message') in the console, I will see a flash message pop up and it will appear as an event in the Vue Dev Tools.

But for some reason it's not getting it from the controller. Any ideas?

I'm making a rest call and saving the response to expectedServices, however it doesn't seem to be ready when I test it (says its undefined).

it(`should get the serviceList from /services endpoint`, done => { // Extend the component to get the constructor, which we can then initialize directly. const Constructor = Vue.extend(Products); const comp = new Constructor().$mount(); var expectedServices; axios.get('http://localhost:9090/services') .then((resp) => { expectedServices = resp.data; }) .catch((err) => { expectedServices = resp.data; }) Vue.nextTick(() => { expect(JSON.stringify(comp.serviceList)).to.equal(JSON.stringify(expectedServices)); done(); }); });

I want a simple way to have scaffolded versions of feathers and vue, where they both use their -cli utilities, but in such way they don't mess with each other, but can be deployed at once. Requisites:

1. I don't feathers-js to recompile things because something changed in the vue sub-folder.
2. I want to deploy everything to heroku and build as it is just one thing (that is, only one "package.json", only one "npm start".
3. I want to use express capabilities of feathers to not only provide the rest/sockets services but also, serve the html/vue-bundled-js.

I've seen several examples where you just create one "server" and one "client" folder, which is great for separation between client-server, but then... how do you include the vue app bundle into the feathers served static (public) and to make all happen seamlessly.

Also please let me know if I'm wrong with any of my "requirements" (a.k.a.: I should change my mindset).

I have a laravel app and a Vue instance attached to the body (or a div, just inside the body).

const app = new Vue({ el: '#app' });

I think it makes sense to use the Vue instance for stuff relating to the layout (eg header, nav, footer logic).

Now I have a form that is visible on a specific route (e.g. example.com/thing/create). I want to add some logic to it, e.g. hiding a field based on selected option in the form. It is logic meant for just this form (not to be reused). I prefer not to put all the logic inline with the form but put it in the app.js. I could put it in the Vue instance bound to the body but that sounds odd as it only applies to the form that is much deeper into the dom.

I want to leave the markup of the form in the blade template (that inherits the layout).

I tried creating a component but am not sure how to bind this inside the main Vue instance. What is the best way to handle things for this form, put it in the app.js and have it somewhat structured, putting the variables somewhat into scope. Or is it really necessary to remove the main Vue instance bound to the full layout code?

What I tried was something like this, but it does not work (attaching it to the <form id="object-form"> seems to fail:

var ObjectForm = { template: function() { return '#object-form'}, data: function() { return { selectedOption: 1 } }, computed: { displayField: function() { // return true or false depending on form state return true; } } };

Things do work if I remove the #app Vue instance or when I put everything directly in the app Vue instance. But that seems messy, if I have similar variables for another form they should be seperated somewhat. I would appreciate some advice regarding the structure (differentiate page layout and page specific forms) and if possible some example to put the form logic inside the main app.js.