Questions tagged [vue.js]

12459 questions
0

votes
1

answer
16

Views

setCustomValidity() not working in Chrome browser

I've got a problem when I'm trying to set custom message in my input: It's working on Firefox browser but on Chrome oninvalid is ignored and it still displays custom message. I've found one topic about version of Chrome HERE, but I have version 74. It's possible they still have not fixed it?
Marshall
0

votes
0

answer
5

Views

How to render contents based on the params received from vue-router?

I am using Vue 3.6.3 to build a film list page. The home page shows a list of films, only includes the brief information of each film, and the user can click the title of the header of each film to enter a page where there is detail information about the film. I use the vue-router to help me with th...
Gary Yuan
1

votes
1

answer
3k

Views

Vue - watch url without VueRouter

Is it possible to react on URL changes in a Vue component, without including VueRouter? In case VueRouter is present, we can watch $route, however, my application does not rely on VueRouter. export default { watch: { '$route': route => console.log(window.location.href) } }
nagy.zsolt.hun
1

votes
2

answer
2.1k

Views

is there any event to check data table pagination changing numbers in vuetify? How data table update:pagination event works?

Is there any event to check data table pagination changing numbers in vuetify? How data table update:pagination event works?
Akram Kalantari
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
1

votes
2

answer
831

Views

How do I properly push JSON array onto existing data array in Vue JS on a Axios response?

I think this is a general Javascipt question however I am working in Vue Js, Laravel & Axios. How do I push one JSON array into another JSON array? My problem is that when I push the secondary array into the primary array it is nested (see screenshot). I need it as part of the same array. Is th...
Jquestions
0

votes
1

answer
28

Views

How to get select option in Vue.js

I am try to use Vue.js. I write javascript code like... new Vue({ el: '#app', data: { classes: [] }, created: function () { var vm = this // Fetch API fetch(xxx.json) .then(function (response) { return response.json(); }) .then(function (data) { vm.classes = data.classes; }) } }); The program will f...
Eric
0

votes
0

answer
3

Views

how i can generate pages from library components from api?

In my project with nuxt.js need generate dynamic pages like items/_id from api. every page can use any of 9 components, sometimes this components can be more than 1 on page with various data/props. dunno somethink like that where keys parent object is order. type in children - what component, and o...
Remi Fokz
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
0

votes
0

answer
4

Views

facing issues of an “error occured while importing file” while having functionality of drag and drop with electron-vue

I am setting up drag and drop functionality in electron-vue. I am passing one image while dragging (could be in renderer process) and passing another image while droping (could be in main process). Basically, I am trying to drag image1 while draging 'item' and droping image2 while droping to deskto...
Pooja Thakor
1

votes
1

answer
861

Views

Mocking Vuex module action in component unit test

I'm currently trying to mock an action from a store's module. I can't seem to properly stub it, as I continue to get a message in my unit tests that says: [vuex] unknown action type: moduleA/filterData Here is a simplified version of the component under test: Item.vue {{ itemName }} import store fro...
imcz
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
3

answer
125

Views

How to simultaniously transition two elements at once?

I'm trying to create a sidebar which can slide-in and -out by clicking on a trigger element. The trigger-element should be sticked to the sidebar. However, in my current fiddle, the triggler-element only changes position after the sidebar completed its transition. How can I accomplish the expected b...
haggis
1

votes
3

answer
406

Views

Assign data with method to vue data variable dynamic

How can I assign data to a dynamic variable. What I'm trying to achieve is this: My vue data variable: test: '', Adding a click
twoam
1

votes
2

answer
1.1k

Views

How do I pass input text t using v-on:change to my vue method?

How can I pass the input value from my html to my vue method called checkEx ist() ? I would like to retrieve that value within my checkExist() method. Could any advice how I can do this? I am still new to vue. HTML: VUE ELEMENT: Vue.component('button-counter', { data: function () { return { count: 0...
ApplePie
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
3

answer
98

Views

End of a scroll event in JS or vue

I want to display somthing while NOT scrolling, hide it while scrolling and redisplay it when the scrolling has stopped. To make myself more clear: I can easily display what I want and hide it again if the scrolling event fires. However if the scrolling event has stopped I want to update my view an...
telion
1

votes
1

answer
766

Views

Open modal from method in vuejs with dynamic content

I am building a component in VueJs where need to open modal if condition gets true and get the data from controller and display in the modal. I have looked online but could not find how to set up the dynamic content after receiving data using axios. Here is my ModalComponent.vue × Close export defa...
Mike Ross
1

votes
2

answer
626

Views

Resizable Vue-good-table or Vue

I have a table make with Vue-good-table in Vue.js. I need to find a way for do it resizable. Something like this. https://codepen.io/validide/pen/aOKLNo Unfortunately, Vue-good-table do not have this option, far as I know. https://github.com/xaksis/vue-good-table/issues/226 I tested with JQuery,...
1

votes
2

answer
565

Views

How can I tell Vue-cli where my app's entrypoint is?

My app is split into an API and a UI portion. Deployment strategy requires they share a package.json. The file structure looks like client/ src/ main.js api/ package.json vue.config.js I am using the standard vue-cli scripts. package.json 'scripts': { 'serve:ui': 'vue-cli-service serve', 'build:ui...
Caleb Jay
1

votes
2

answer
514

Views

Deploy Nuxt on shared hosting

I want to know if it is possible to deploy Nuxt app on a shared hosting. After running npm run build --spa it generated below file structure in the dist directory, but don't know how to go from here. nuxt dist
obi patrick
1

votes
1

answer
445

Views

nativescript passing props vue

Having trouble passing a prop in nativescript this.$navigateTo() import EditMeme from './EditMeme' export default { computed: { memes(){ return this.$store.getters.memes } }, components: { EditMeme }, methods: { goToEditPage(ImageUrl) { this.$navigateTo(EditMeme, { context: { propsData: { Image: Im...
hhh
1

votes
2

answer
328

Views

File uploading with ActiveStorage in Vue.js

I'm looking to add file uploads to a Card model (including single and multiple files) using the new Rails 5.2 ActiveStorage feature. I'm stronger in Rails and am using Vue.js to pull this off - previously I would use Paperclip to handle this. However, I've setup the config/storage.yml file and neces...
VegaStudios
1

votes
2

answer
198

Views

vue js how to pass data from parent, v-for loop list to child component with method

I am trying to achieve a list of items displaying each item receipts array in a child component(modal-component), but have been unable to do so. Method display_receipts() is to change the data value of receipts_modal to true. where can I place the v-bind to pass the array? Any help is much appreciat...
NewProgrammer
1

votes
1

answer
1.1k

Views

potentially fixable with the `--fix` option

I am creating a app with nuxt.js but everytime I launch the app, gives me the error of eslint and saying 'potentially fixable with the --fix option.' I did the command npm run lint -- --fix and it works but then If I do another change in any vue file it comes again the same error and I have to do it...
Ricardo Moreira
0

votes
1

answer
13

Views

how to replace null values from database with empty string in chain for functions

I'm using lodash and have this code right now data: _(responseData.data) .pick(['title', 'layout', 'slug', 'author', 'seo', 'css', 'js']) .mapKeys((value, key) => _.camelCase(key)) .value() Some of the values can be returned as null from the database. I would like to replace null values with an emp...
niko craft
0

votes
0

answer
6

Views

Vue.js Transitions - 1st Entrance Not Working

I made a Code Sandbox snippet to illustrate a vue transition not working on its initial appearance. I'm using the following css to achieve the slide-in-slide-out effect: .slide-fade-enter-active transition: all 2s ease; .slide-fade-leave-active transition: all 2s ease; .slide-fade-enter // /* .slid...
qarthandso
1

votes
1

answer
196

Views

Vuejs form not submitting on “enter”

TL;DR Question Why can I not use 2 of the same input fields in a form, and the enter button submit the form More detailed question Straight to the point. I'm trying to use the enter button to submit a form when an input element is focussed, which should then emit an event. I've written a codepen her...
Phil Cross
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
42

Views

Convert String to Object Key Name

I'm sending different objects to a component outside, and component data varies depending on objects. I'm getting the names with the Object.key function because the keywords I send have different key. Then I want to sort by the key. For this I need to define the name I received with Object.key funct...
Mahir Altınkaya
1

votes
3

answer
62

Views

How to access image from /storage -laravel- from SPA with vuejs

if i put an image in 'storage/app/public/img/logo.png' and execute:  $ php artisan storage:link How i get that logo.png in vue component? The requested it's ok (200) but that image not render, because is an SPA. Thank you,
Wiicho Orozco
1

votes
1

answer
21

Views

beforeDestroy vue dynamic component

How could I add a alert message before switch the component? (beforeDestroy does not work until the path is changed...)
Sara NJ
1

votes
2

answer
34

Views

Vue.js + Webpack Requesting Multiple Incorrect Resource URLs

I've been using Vue.js single file components to build a website and really enjoying the modular system. I'm running into an issue however where the browser seems to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue export default { name: 'HeaderBar' } #hea...
735Tesla
1

votes
2

answer
30

Views

Passing props values to component

I have this component: InputField.vue export default { props: { label: { type: String, required: true, default: 'label', /*
1

votes
1

answer
33

Views

Vue: Data fields changing as inputs are edited

Editing to remove component names but basically trying to use v-modal to get component data inside. Editing to remove component names but basically trying to use v-modal to get component data insideEditing to remove component names but basically trying to use v-modal to get component data inside wp....
jjoan
1

votes
2

answer
59

Views

Is it good to access DOM in vue js?

I want to know is it OK to access DOM in a Vue js application? For example, if I want to append an element (div) to body tag is this recommended to use document.getElementById in a Vue js method? I have no data that can be used to make or remove elements based on data. I really just want to know is...
Aref Hoseinikia
1

votes
1

answer
29

Views

Global $root event in vue never arrives

I have a dynamically instantiated vue component which should communicate with the root vue instance via an event. The component (a dialog form) issues the event with this.$root.$emit() and the root listens with this.$root.$on() and no event arrives. When I debug I see two different instances of this...
Marc
1

votes
2

answer
57

Views

Vue/React: Proper way to call functions to pass down data?

So I'm confused to the best way to pass down data when building React or Vue apps. Method 1) I had my child components calling functions that made API calls to get/refresh data on the component. Method 2) I just recently made the switch, wherever possible, in these child components to put these...
jjoan

View additional questions