Questions tagged [vuejs2]

1

votes
1

answer
1.3k

Views

VUE watch triggered infinite loop

I'm new to using VUE.Js, and i created a very simple app to try out how it works. The problem happens immediately where when i run the app, the watch for a variable is triggered in an infinite loop. I cannot figure out why. There is a v-for loop but that is on an array that only has two elements. I...
user1161137
1

votes
2

answer
742

Views

Capturing radio input value in vue.js

How can I get the value of a radio input and pass it to a function using @click in Vue.js. I actually want to do something like this: What is the right syntax?
1

votes
1

answer
486

Views

axios interceptors integration with vuejs custom components for displaying error messages in a generic way

Let's suppose we have the following piece of code axios.interceptors.response.use(function (response) { return response; }, function (error) { if (error.response.status === 400) { if (error.response.data.type === 'fieldsValidationErrors') { openModal(modal.validationsFailedInfo); } else { openModal...
tzortzik
0

votes
0

answer
5

Views

VueJS/VueX : Watch never called when state property is an array

I have a simple flow that consist to: Call a VueX action to store multiple cars on backend side Call a mutation to store new cars just created Declare a watch that should be called each time the array of cars i changed Problem is that my watcher is never called on my component. VueX module: /* * Sta...
wawanopoulos
1

votes
1

answer
319

Views

Chrome doesn't work for vuejs v-on:click in option tag

I have something like the following code : @{{category.category_name }} It works fine in firefox but doesn't work in chrome and safari. in other words @click doesn't work in chrome when it's in an option tag. It's obvious that I'm using vuejs. any idea?
blank94
1

votes
1

answer
2.2k

Views

Watch height of an element in VueJS

Is there any way to set a watcher on the height of an element in VueJS? I am trying to fix the filters part on a search result page. but if the results change there is no way to find about it and unfix the filters.
Saeed
1

votes
2

answer
228

Views

How to add custom properties to Vue modules and instances

When you inspect a Vue component that you have imported, you will get something like this: import ClickB from 'ClickB.vue'; console.log(ClickB); I have seen that nuxt adds a custom property there (called _nuxt), just like there is _ssrRegister. I have 2 questions: How is it possible to add propertie...
Lukas
1

votes
1

answer
473

Views

Get all selected checkboxes with Vue of list

how can I get a list of all checkboxes that I selected with Vue? This is my HTML which works and shows me a list of my products with a checkbox. What I want is that when I click on a button, it fetches all checkboxes that I selected. And give me all the values. But I can't figure out how to do it, b...
user1469734
1

votes
1

answer
863

Views

How to paginate with Vuetify and Laravel?

Goodnight I'm trying to do server side paging with Vuetify and Laravel. But the methods provided by Vuetify have not worked for me to do it correctly. I have a completed page that I want to implement with the Vuetify components. I attach my code made with simple bootstrap. thumb_down thumb_down Meth...
OscarDev
0

votes
3

answer
20

Views

How to access vue instance data in runtime

my question is pretty simple, i want to assign data in run time and get them again in vue instance data() { return { panels:[], }; }, created() { this.fetchPanels(); //console.log(this) , i can find panels already assigned in this instance //console.log(this.panels) , it gives me zero array }, metho...
Ahmed Ibrahim
1

votes
4

answer
54

Views

Vue controlled inputs

I'd like a text input to accept only a sequence of numbers. Any other char should be ignored silently. Here's a simplified version of my component: {{ tel }} export default { name: 'App', data: () => ({ tel: '1234' }), methods: { setTel(v) { const val = v.target.value.replace(/[^0-9]/g, ''); this.te...
maioman
1

votes
1

answer
56

Views

Laravel passport: Manually create access token

I'm building an SPA using VueJS and Laravel. I'm using Laravel passport for logins which works fine. However I would like the ability to send users magic links to log in with. However I'm not sure how to create an access token without sending a request with the password to the oauth route. It seems...
John Mellor
1

votes
2

answer
21

Views

Is it possible to execute $emit as synchronous mode and get the result back from emit event

Is it possible to execute as emit as synchronous and get the result back in calling method itself. So, I want to execute next statement after the $emit completed. its as below: Parent component has method, doCustomValidation(); child component is as follow: methods: { Save: function(){ // Can I get...
user3711357
1

votes
1

answer
26

Views

SASS variables not rendering correct results in VueJS app

I have 2 SASS var colors: $red: '#F06292'; $lightPurple: '#8F6894'; Code: @import url('https://fonts.googleapis.com/css?family=Inconsolata|Oswald'); $red: '#F06292'; $lightPurple: '#8F6894'; #app { font-family: 'Inconsolata', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:...
Leon Gaban
1

votes
1

answer
29

Views

Bind color with Vuejs

I want to give icon color with for loop. I have tried in this way. But getting no result. I know it's possible to bind style. {{ navtab.icon }} Data property: export default { data () { return { navtabs: [ { icon: 'info', name: 'About Book', color: 'teal darken-2' }, { icon: 'favorite', name: 'Speci...
Info Kamiabi
1

votes
2

answer
36

Views

vuejs2 copy clipboard issue

I am trying to use https://alligator.io/vuejs/vue-clipboard-copy/ for copy clip board feature in Vue.js, it is working fine for string but when I have an object, it is not copying properly. Below is the sample code. Copy if test is a simple string then I am getting that string properly copied to c...
Madasu K
1

votes
2

answer
52

Views

Vuetify sticky header toolbar

I use v-toolbar but when I scroll down it get disappears. Basically I want to a sticky header. This is my code basically. Title Link One Link Two Link Three {{n}}
0

votes
0

answer
6

Views

How to put v-model on the following bootstrap button?

I am trying to add v-model on a bootstrap dropdown button but i cannot put a v-model on the template or li or a? Any idea on how tackle this? Quick Order By Date: {{sortingField.text}} Originally i had a select which was working fine but for some reason decided to go for dropdown button. The origina...
paarth sharma
0

votes
0

answer
3

Views

Vue Component does not render changes of object (despite $set being used)

I am trying to build a Vue component that displays the hour and minute of a Date and emits a changed version when a + or - button is pressed. Screenshot: https://i.imgur.com/hPUdrca.png (not enough reputation to post image) Using the Vue.js Devtools (in Google Chrome) I observed that: The change eve...
Joshua
3

votes
2

answer
60

Views

NativeScript Vue - Conditional nativation based on user's login state

I'm using NativeScript-Vue. I have some pages that are protected (member-only). And I maintain my user's login data in localstorage. I have two questions: When a user opens the app, where in the application should we write the code to retrieve user's login data. I would like to read the data from t...
asanas
1

votes
2

answer
562

Views

Issue with foundation used in .vue single file components

I have realised that there is a problem when using Zurb Foundation classes in .vue single file components. At first I could not get a Reveal Modal to work inside the .vue component but it was working when I use the same code in a blade or html file. Then I noticed a pattern because when I tried to u...
Phillis Peters
0

votes
0

answer
6

Views

How to change vue-resource Vue.http.options.root variable without reload page?

I use VueResource in my SPA and some times, if I want to change base url, i need to reload page with window.location.reload() for change base url by parameter from localStorage. localStorage changed inside component code by select in UI. My vue-resource.js code is import Vue from 'vue' import VueRes...
Ilya Shapkin
1

votes
1

answer
1.5k

Views

Vue 2 - select set selected with boolean value

How can I set selected option based on the boolean value. country.show can be 0 or 1, and based on that, I want to have preselected option. This is the code snippet: No Yes
Sasha
1

votes
3

answer
2.4k

Views

How use own js as plugin using nuxt js

i am using nuxt js. i have a helper.js script inside plugins folder which have a simple Test() method. Now how i can use this Test() method from pages. helper.js export default function Test() { return 'This is test' }
shak imran
1

votes
2

answer
2.8k

Views

How to remove class in vue.js

As I am new to Vue.js, can anyone help me in how to remove class from element similarly like we do in JQuery. $('.class1').removeClass('class2');
Ayaz Sayyed
1

votes
3

answer
488

Views

Handling unexpected side effect in computed properties - VueJS

In the following code, I'm trying to use the getTranslation object to map values present in originalKeys array and push the values in a new array allKeys. But ESLint is giving me this error, Unexpected side effect in 'getkeys' computed property. I tried shifted the getkeys function to methods, but I...
Vasu Mistry
1

votes
4

answer
66

Views

Is it possible to point to a class?

I have a Vue application (a all-encompassing element with with several child components) to which I would like to add a night mode. I would like this night mode to be managed centrally, where the relevant styling would be applied to the elements which need to switch to night/day mode. If I have an e...
WoJ
1

votes
2

answer
37

Views

VueJs / Laravel. Sum of Multiple arrays in different objects

i use this code to display all persons i have. //Each Person is an Object. in Each Object there are multiple objects(Money Given). i Need to Calculate the sum of total amount (Array) existing in those objects (All money given to each person) //Like to say, all the credits relative to each Person....
yassine j
1

votes
2

answer
158

Views

Is mutating a property of a prop with v-model bad practice?

The vue.js docs are quite strict in saying that mutating props inside of the component is bad practice. Also there are two cases described, in which a developer may be tempted to break this rule: When setting a default value When the given prop values should be mutated. Since I started with vue.js I...
Nico O
1

votes
1

answer
89

Views

Where is the loop infinity?

I find myself with an infinite loop error but I don’t see where it is. That’s when I add class. template : Jour de la semaine {{dayOfWeek(day,index)}} script : data: () { isWeekend: false, }, methods : { dayOfWeek(day) { var d = moment(new Date(this.currentYear + '-' + this.nbMonth + '-' + day))...
DenisMasot
1

votes
2

answer
45

Views

Getting current title of page and updating from nested component and updating in Vuejs 2

I have a component called Notificiations.vue that is imported and used in the same parent component where my router-view is also being used. Very basic example - my App.vue is something like: Most of the individual pages that can be accessed with the router have a component that sets the page title...
sbell9
1

votes
1

answer
21

Views

Loading Javascript file within component

Hi I have gone through some answers but none of them seem to work. I have a Javascript file like so. It is stored in my src folder. let model = function() { let model = function(data) { if (!data) return; return map.call(this, data); }; function map(data) { return data; } model.map = function(_) {...
kate_hudson
1

votes
2

answer
43

Views

Insert item after every nth item in v-for loop

I am iterating through a list of products and displaying them in cards. I'd like to display a promotion after every 18th product listed:
retrograde
1

votes
1

answer
41

Views

Using dynamic name in v:bind inside v-for

So, basically, I have products array, and prices array, which has a product_id array inside (and inside that array I have the price and priceAfterDiscount data). The problem is that I am not able to pass this data using v-bind. (See :price='`prices.product_${product.id}.price`') This renders f.e. pr...
Vaqif Hamzayev
1

votes
2

answer
31

Views

how to define a method inside the Vue directive?

I have directive and I wanted to create a local method inside the directive and use it in the hook function. Here's my code: export const OutsideClick = { bind (el, binding, vnode) { console.log(new Vue()); // call method1() }, componentUpdated(el, binding, vnode) { console.log('updated comp', bind...
1

votes
1

answer
52

Views

The show method in laravel return the index method instead

I have an issue trying to use the show method in a resource controller in laravel 5.7. I'm working with VueJS and axios to http requests. The index method is called instead show method. I'm pass do the call with get method and the ID param. Routes: POST | products...
Andres Ruales
0

votes
0

answer
11

Views

Using Vue Route and Laravel Routes at the same time

I am trying to use vue routes and laravel routes in a same application, but I am having problem with creating a 404 page. I created a 404 page with vue but it will show up in all laravel routes. My laravel routes->web.php Route::resources([ 'patient' => 'PatientController', ]); //for vue router Rout...
UBGN
1

votes
1

answer
36

Views

how check form is valid and disable submit button in vuejs2?

I want to check if form is valid using vee-validate. I am currently doing it like this: But when the form is created and not validated yet, errors.count() return 0, meaning that the button stays enabled until the user modifies a field. Is there any way to validate it at start?
ATT
1

votes
1

answer
43

Views

Which is the best way to pass data component to component in vue js [closed]

I have seen there are many ways to pass data component to component in vue js but I want to know which is the best way from listed below 1) Vuex store.commit('anyMethod'); 2) $root : With emit an event useing $root this.$root.$emit('eventName',data) 3) Server Bus : Where we have to create and a n...
Parth Jasani
0

votes
0

answer
16

Views

Workaround for focus on input after component is mounted on mobile safari

I can't set focus on input after Vue component is mounted on Safari Mobile. In my other project, that based on jQuery I resolve this bug with triggering touchstart on click handler. But in Vue this trick not working. I know that on mobile safari I can't trigger focus event outside real user interact...

View additional questions