Software

New to Vue.js. From the docs, one simple example is to use components to render each item in a list, like this:

<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } })

(Source: https://vuejs.org/v2/guide/index.html#Composing-with-Components)

My question is: what is the correct way of changing, for example, a todo text?

My initial idea was to use <input v-model="todo.text"> in the component template. And it works. I find this nice because it updates the array of to-dos in the root component data attribute, which means I don't have to write an event to make the changed data bubble up.

But there's a problem. Reading on the docs in components, I saw this:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to reason about. In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

If I understood this correctly, I should NOT try to change the todo text the way I did, because even tough it works, I'm changing a prop inside a child component (since each todo is passed to a child component via a prop).

But the documentation clearly says that Vue would warn me against this practice in the console, but I see no warnings.

Also, if this is not a best practice, how should I make a change in the to-do name correctly?

I am using vue-switch that toggles on and off and I need to know what state it's in. According to the documentation at https://www.npmjs.com/package/vue-switch I am just supposed to use :value.sync="toggle" in the switch component with a data property called 'toggle', which I've done. I'm getting the following error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" vue switch found in ---> <Switcher> at E:\Dev\BackgroundCheck.Members\front-end\node_modules\vue-switch\switch.vue

My HTML:

<switcher size="lg" color="green" :value.sync="toggle"></switcher>

My JS:

<script> import mySwitch from 'vue-switch'; export default { name: 'BackgroundReports', components: { 'switcher': mySwitch }, computed: { report() { return this.$store.getters.currentReport }, isBeingMonitored() { return this.$store.getters.isBeingMonitored } }, mounted() { this.toggle = this.isBeingMonitored; } } </script>

The switch.vue code:

<template> <div :class="className" @click="onClick"> <span class="open">{{ openName }}</span> <span class="close">{{ closeName }}</span> </div> </template> <script> 'use strict'; export default { props: { value: { default: true, twoWay: true }, size: { type: String, default: 'md中' }, // blue red green orange color: { type: String, default: 'red' }, openValue: { default: true }, closeValue: { default: false }, openName: { type: String, default: 'ON' }, closeName: { type: String, default: 'OFF' }, disabled: { type: Boolean, default: false } }, computed: { className() { let { value, openValue, closeValue, size, color, disabled } = this; return { 'vue-switch': true, 'z-on': value === openValue, 'z-disabled': disabled, ['s-' + size]: true, ['c-' + color]: true }; } }, methods: { onClick() { let { disabled, value, openValue, closeValue } = this; if (!disabled) { if (openValue === value) { this.value = closeValue; } else { this.value = openValue; } } } } } </script>

So I am in a situation where I want to create a const value inside mounded(). And want to use this const value inside the methods of a vie component.

export default { name : 'app', data(){ }, mounted(){ // Constant refThis is defined here which gets the reference to this vue component const refThis = this; }, methods:{ useThisRef() { // I want to be able to use the refThis here } } }

I'm kinda new to VueJS so I was hoping to get some help. I'm currently returning an array of json objects from a PHP file.

Example:

<?php /* Returns an array similar to this: [ {name: 'foo'}, {name: 'bar'}, {name: 'banana'} ] */ echo json_encode(array_values($array)); ?>

And I'm appending this array of objects to an already existing array of objects in Vue:

axios.post('http://localhost/get_array.php').then(response => { // Append returned array to already existing array for (var i = 0; i <= response.data.length - 1; i++) { this.existingArray.push(response.data[i]) } }).catch(e => { console.log("Error") })

Right now I'm appending the data with a for loop but I was wondering if VueJS has an in-built function that does this automatically without having to use the for loop?

Looking for some help with Vue and WordPress:

I’m trying to get Vue and PHP to talk with each other and having some trouble. Currently, in the project, we’re creating an anchor for each “resource”

<a v-if="resource.pdf_color" :href="resource.pdf_color.url" download class="btn btn-with-icon icon-file-check" data-toggle="tooltip" data-placement="top" title="Color Download"> <label>Color Download</label> </a>

However, we would like to use a WP plugin called “Easy Media Download” to limit number of resources downloaded (we’re trying to minimize members signing for one month to download all materials then canceling service).

I’m trying to figure it out how to be able to call the $url resource.pdf_color.url inside the shortcode do_shortcode( '[easy_media_download url=" $url "]' ) and then bind it to the anchor element inside the href argument. I’ve tried a few things but haven’t had much luck.

Any suggestions or ideas on how to solve this?

how can I call method or mutation in Vuex from watcher?

this.$store is undefined and if I try to call method have error function is not defined?

Code:

watch: { formData: { handler: () => { console.log(this); this.SetStoreForm(); }, deep: true } }

Method:

methods: { SetStoreForm() { this.$store.commit('SetProductForm', this.formData); } }

Thanks

I have a <router-link to = "/ endreco / test">, but I need to perform the same behavior on a vue-material tab, something like this: <md-tab md- icon = "books"> .. to change my route, same as the href = ""

What should I do?

I'm using vue.js, the vue-router to control routes and style with vue-material

this is a part my simple slides demo by vue

<div class="slide" @mouseover="clearinv" @mouseout="runinv" @keydown.39="goto(nextIndex)" @keydown.37="goto(prevIndex)">

Like that, I want to touch the keydown event with left(37) & right(39)

and touch the goto(nextIndex) function,but while I pressing the key, the slide won't listen my keydown event...

I have considered that window.addEventListener('keydown',(e)=>{...}) in the mounted hook, and it can solve this.

But, I think it will be the better solution in Vue.

How can I solve this?

-

this is the full one on CodePen

I'm new to Vue2 and am trying to to get a reference to a model's value in a form to be passed to a method. I have:

<div v-for="n in maxLength"> <input v-model='price.matrix_prices[n]' /><div @click="fillPrices(?)">set all to this price</div> {{n}}</div>

The matrix_prices is a hash with specified values. Lets say someone fills in 8 in the input model, how would I get a reference so that ? would be eight?

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 !