Questions tagged [v-model]

I have several input fields in Vue.js that I want to restrict to only accept numbers. I want to prevent users from entering any characters except digits from 0-9. I managed to achieve this successfully with a solution that is resistant to copy-paste: C ...

I am currently working on collecting data that the user can download, and I am facing a challenge in determining the best way to handle the filename. To ensure the default filename is dynamic and based on the current date, I believe creating a computed pro ...

I am facing an issue with my Vue application. I have a table where each row has its own unique id. I need to show or hide certain elements based on a condition in the v-model directive which compares the row id with a value in the model. The current code s ...

I'm experiencing a reactivity problem in the example below. I can't figure out what I'm doing wrong. Is my vue data set up correctly or is there something else I need to do? Here's how my object model looks: export default { data ...

Apologies if the title doesn't fully capture my query. In the brief Vue code snippet below, I have 2 input fields. One utilizes v-bind and the other uses v-model. I am puzzled as to why changing the second input resets the value of the first input. ...

Whenever I navigate to the message page and select a device, the v-model selected value changes. However, if I go to the device or contact page, the v-model selected value remains unchanged or goes back to the last selected value. Below is the function in ...

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

Within my template, I have form-group components that are being iterated over based on the value of a select element (an integer). My goal is to access the values of these iterated v-models, but I am struggling to get it right. TEMPLATE <b-form-g ...

I am currently developing a web application that allows users to collaborate on projects. The app's architecture is structured in the following manner: Component A (the main app container) Components B1-Bn (including header, footer, and main window, ...

I am encountering a problem with setting the v-model on an input of type color. Whenever I change the color, there is a noticeable drop in frame rate and the application's FPS spikes from 60 to 3. You can see it reflected in the Vue performance graph ...

Below is the code snippet that I am working with: <input v-model="comb.inactive" type="checkbox" @click="setInactive(comb.id_base_product_combination)" > I am looking to apply the opposite value of comb.inactive to the v-model. Here are m ...

I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown: Parent Component ...

Is there a way to automatically pass the value of the input into the v-model? Thank you :) Here is the code snippet: <input value="{{$in->id}}" v-model="upload.id"> I attempted the following in my script: upload: { bank:'', i ...

I am trying to make VueApp use either v-model or v-bind:value for the object received from the network API. For instance, if the Vue app fetches an object from the API in this format: { field1:value1, field2:value2, ......... , field100:value100 } ...

I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user&ap ...

UPDATE Here is a recreation of the issue I am facing I need to dynamically bind with the correct index, how can I achieve this? CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE <template> <div> ...