Software

I'm trying to send data from one component to another one without any success. I have one parent component App.vue and two child components Base.vue and Ingredients.vue. Mainly I' would like to send dynamic {{selectedBase.price}} (which is updated every time you select/deselect the option) from Base component to Ingredients component and being rendered on Ingredients component dynamically.

I imported and defined my-base and my-ingredients components on the main.js file

//App.vue <v-app light> <main> <v-container fluid> <v-flex xs12 sm6 offset-sm3> <my-base ></my-base> </v-flex> <v-flex d-flex xs12 sm6 offset-sm3 class="text-xs-center"> <my-ingredients></my-ingredients> </v-flex> </v-container> </main> </v-app> //Ingredients.vue <v-layout row v-for="ingredient in ingredients" :key="ingredient.id"> <v-layout column> <v-flex xs6 offset-xs5> <v-checkbox class="text-xs-right" name="checkbox" color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="ingredient.checked" light></v-checkbox> </v-flex> </v-layout> <v-layout column> <v-flex xs6 offset-xs5> <v-subheader>{{ingredient.price}} €</v-subheader> </v-flex> </v-layout> </v-layout> <v-divider></v-divider> <v-layout row wrap class="mb-3"> <v-layout column> <v-flex xs6 offset-xs3> <h3 class="headline mb-0">Total price:</h3> </v-flex> </v-layout> <v-layout column> <v-flex xs6 offset-xs4> <v-subheader> {{total}} €</v-subheader> </v-flex> </v-layout> </v-layout> <script> export default { data: () => ({ checked1: '', showCart: false, ingredients: [{ id: 1, name: "Mozzarella", price: 2, checked: '', }, { id: 2, name: "Cheddar", price: 2.0, checked: '', }, { id: 3, name: "Bacon", price: 2.25, checked: '', }, { id: 4, name: "Mushrooms", price: 1.6, checked: '', }, { id: 5, name: "Pepperoni", price: 2.5, checked: '', }, { id: 6, name: "Sucuk", price: 2.75, checked: '', }], }), computed: { total: function() { var total = 0; for (var i = 0; i < this.ingredients.length; i++) { if (this.ingredients[i].checked) { total += this.ingredients[i].price; } } return total; } } } </script> //Base.vue <v-layout row wrap primary-title v-for="base in bases" :key="base.id"> <v-layout column> <v-flex xs6 offset-xs3> <v-avatar size="80px" class="grey lighten-1"> <img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar"> </v-avatar> </v-flex> </v-layout> <v-layout column> <v-flex xs6 offset-xs4> <v-subheader>{{base.name}} {{base.price}}€ {{selectedBase.price}}</v-subheader> </v-flex> </v-layout> </v-layout> </v-card> </template> <script> export default { data() { return { selectedBase: {}, bases: [{ id: 1, name: "Margarita", price: 4, href: "../../static/margarita.jpg" }, { id: 2, name: "Salami", price: 6, href: "../../static/salami.jpg" }] } }, computed: { totalBase() { var totalBase = 0; for (var i = 0; i < this.bases.length; i++) { if (this.bases[i].selected) { totalBase += this.bases[i].price; } } return totalBase; }, methods: { getSelectedBase() { return this.selectedBase; } } } } </script>

I have a Vue.js app. I am trying to use the vue-charts package. I'm importing the chart module in my index.js file like this:

import chartJS from 'chart.js'; import VueCharts from 'hchs-vue-charts'; Vue.use(VueCharts);

Then, in my index.vue file, I have the following:

<template> <div class="page"> <h2>Hello</h2> <chartjs-line></chartjs-line> </div> </template> <script> export default { data() { return {}; } }; </script>

The word "Hello" appears just fine. For that reason, I know that my app is being properly mounted. However, the chart does not appear. When I look in the devtools window, I see the following error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I assumed when I called Vue.use, the component would get registered. However, I'm clearly doing some wrong. Yet, I'm not sure what. How do I use the vue-charts components in my single file components?

I have an event in vuejs

methods: { filterPeople: function filterPeople() { $(event.target).closest('li').addClass('active'); });

In firefox I get an error

TypeError: event is undefined mounted/< re/e.prototype.$emit filterPeople

Any idea why this does not work in FF

Is it possible to bind mixin arguments to a vue instance?

I have this mixin to render a table:

mixin table(header,data,type) - var type = type || "" table.table(class=type) thead tr each head, i in header th #{head} tbody each row,j in data tr each col,k in row td #{col}

Which can be used normally like this:

+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

My question is if it is possible to take the 'header' and 'data' arguments of the mixin from a vue instance.

I created a form and I would like to retrieve my information and put it in my localstorage with vueJS

For this I created an input

<input v-model="pretDuree" class="input pretDuree" type="number" name="pretDuree" min="0" max="25" v-on:input="set_pretDuree" required>

And now I'll look for it

set_pretDuree : function(){ console.log('set'); localStorage.setItem( 'pretDuree', this.pretDuree ); pretDuree = get_pretDuree(); }, get_pretDuree : function(){ console.log('get'); return localStorage.getItem( 'pretDuree' ); }

But I can not put my value in my input when I use "v-on:input".

And I can not retrieve it to display it elsewhere.

Thank you for your help.

Cordially,

I am working on this project locally https://github.com/misterGF/CoPilot but now that it is finished, I would like to push it to heroku. the problem is telling heroku to start the app.

In the heroku example, the demo server runs after picking up the info from Procfile with contains this data

web: node index.js

But in my vuejs project, there is no index.js that servers the content.

I only have the main entry point which is index.html and the procfile doesn't work with HTML.

I am a new to vuejs / vuex so I have a question about how vuex reactivity is supposed to function. I have the following store:

// state state: { database: { tables: [] } } // mutator ADD_TABLE(state, {table}) { state.database.tables.push(table); }

So when the ADD_TABLE mutation happens vue components and the vuex watch react only when the object is directly changed and not reacting on nested property change.

// after the mutation happens store.watch(state => state.database, change => console.log(change)) // this doesn't log store.watch(state => state.database.tables, change => console.log(change)) // this does

Is this the desired behavior and why, or I have something breaking in my code?

I need to set the first value in my array as the default checked radio button, but I'm having some issues. Currently I'm able to set the default as the last value in the same array, but that is not what I want. Any help would be appreciated!

<label class="calendar__transport-label" for="transportSelect">{{$t("message.transportLabel")}}</label> <div id="transportSelect" class="form-group calendar__transport-list calendar__radio"> <div class="calendar__transport-option" v-for="(amenity, amenityIndex) in calendar.amenities" :key="amenityIndex"> <label> <input name="transportRadio" type="radio" v-model="value" :value="amenity.id[0]" :checked="amenity.id[0] == currentAmenityId"> <span>{{amenity.description}}</span> </label> </div> </div>

Here's the markup:

<ul> <li v-for="(topic,label,index) in guides" :key="index"> <ul> <strong> {{label}} </strong> <li v-for="rule in topic"> {{rule.val}}, {{Object.keys(topic)[0]}} </li> </ul> </li>

And here's the data for this list:

data: { guides: { "CSS" : { 1502983185472 : { "modifiedby" : "bkokot", "val" : "When adding new rule, use classes instead of ID whenever possible" }, 1502983192513 : { "modifiedby" : "bkokot", "val" : "Some other rule" }, }, "Other" : { 1502628612513 : { "modifiedby" : "dleon", "val" : "Some test text" }, 1502982934236 : { "modifiedby" : "bkokot", "val" : "Another version of text" }, } } }

So as you can see there is a "guides" property which is an object of other objects that do have inner objects too. All I want is to get the keys from inner (second) loop (numbers "1502983185472" etc). The only solution that i see right now is "Object.keys(topic)[0]", but is there a more accurate alternative in vuejs for this? Adding key, index parameters to the second loop(with new unique variable names) doesn't work for me.

Here's a working fiddle: https://jsfiddle.net/thyla/yeuahvkc/1/

Please share your thoughts. If there is no good solution for this - may it be a nice topic for a feature request in Vuejs repo(unless I'm missing something terrible here)? Generally if you're curious - that number is a momentjs timestamp - I'm using this data in firebase, and saving initial timestamp as an object key seemed to be a pretty nice solution (since we need a key anyway, to save some space - I can use this key instead of another extra timestamp property in my object, this also makes the instance very 'targetable' in firebase).

Thank you in advance ! Cheers!

p.s: another possible solution is converting inner loop (css, other) from objects into arrays and using time-stamp as another object property, but I'm using firebase - saving this data as an object gives me an ability to quickly access some instance without parsing the entire parent object/array, makes it more easy to filter, search, reupdate, etc - thus converting object into array is not a good solution for instance with very large number of items.

i'm posting JSONobject by FormData() but in back end result i got Count 0 but that data what i'm sending is empty result is null

This question already has an answer here:

• How do I return the response from an asynchronous call? 21 answers

How can i do for having coord immediatly :

this.latitude = 0; this.longitude = 0; navigator.geolocation.getCurrentPosition(position => { this.latitude = position.coords.latitude this.longitude = position.coords.longitude console.log('lat : ' + position.coords.latitude) console.log('long : ' + position.coords.longitude) }) console.log(' too late : '.this.latitude) console.log(' too late : '.this.longitude)

Result : too late : 0 too late : 0 lat : 0.123456 long : 40.23456

How can i do for having : lat : 0.123456 long : 40.23456 too late : 0.123456 too late : 40.23456

Thank you !

I have a page which renders a child component (chart) that is passed the data that fills the chart as a prop (list). It is being shown and hidden by a div that wraps it, and my problem is that when it is shown and my data (list) changes, it will properly redraw and update. But if it is hidden while the data changes, and then shown again, NOTHING draws at all in the space, it is blank, not even the previous chart. It looks roughly like this:

<div class="bluecards"> <div v-on:click="isShowpie = !isShowpie"> My clickable bar title that hides/shows Pie below </div> <div v-show="isShowpie" class="content"> <div class="chartwrapper"> <pie-chart v-if="loaded" :list="list" class="pchart"></pie-chart> </div> </div> </div>

How to pass values between exported part of a script and non-exported one?

The construction looks like this:

<script> // PART 1: import { EventBus } from './event-bus.js'; EventBus.$on('value-received', value => { this.receivedValue = value; }); // PART 2: export default { data() { return { receivedValue: '' } }, watch: {...}, methods: {...} } </script>

How can I get the value assigned to receivedValue variable and made usable by Vue methods?

I'm using vue.js 2 and bootsrap 3 to open a modal that opens a 2nd modal.

Few days ago, I asked a question on how to set a focus on a control contained in a 2nd modal. I got a great answer that solved the issue.

Problem When opening the 1st modal, the user is able to scroll through it to see its bottom. But after opening and closing the 2nd modal, the focus moves to the page that contains the 1st modal. and when the user scrolls to see the rest of the 1st modal, he scrolls the page behind that 1st modal.

It is very uncomfortable to use especially when the modal is bigger than the screen height. Is there a way to prevent this?

To reproduce this issue, open the answer and click on "Expand snippet"

I want to see all errors for one field. But it always show me the first one. enter image description here

I want to do transition on my three elements. My text should change to another and my A elements should fade. How to do it correctly?

<transition name="fade"> <div> {{text}} <div v-if="show"> <a @click="show = !show" href="#"></a> <a @click="show = !show" href="#"></a> </div> </div> </transition>

I’m currently working in Vue.js & Laravel (php framework) and I’m using “multiselect”, I’m trying to use it with objects from my database ( I get them with axios). My multiselect works but this happens :

My currently page And I would like only one “denmark” option but when I choose it it show me all the application related to “denmark”.

I used this example : https://gist.github.com/superlloyd/c1ea010a63dade8f3d14948296ac8646#comments1

Do you have any ideas ? :slight_smile:

Thank you.

I'm new in Vue Js and not sure how to do the following task.

I have a list of items and it should work like the following: If one item from the list is clicked, other items in the list should disappear. How should I do this in Vue.js?

I try to access router in my typescript class component:

import {Vue} from 'vue-property-decorator' import Component from 'nuxt-class-component' import {Getter, Action} from 'vuex-class' @Component export default class Login extends Vue { @Action login username = '' password = '' async submit () { await this.login({username: this.username, password: this.password}) this.$router.push('/results') } }

Unfortunately, I get:

error TS2339: Property '$router' does not exist on type 'Login'.

I want to load state from localstorage in an action: However I get store.replaceState is not a function.

loadState (store) { let stateJson = localStorage.getItem('vuex') if(stateJson) { let state = JSON.parse(stateJson) store.replaceState(state) } }