What is the best way to assign a dictionary value to 'v-model' using a specific key?

Currently, I am working on integrating filterDataArray into my application to dynamically add parameters to my API requests.

For this purpose, I have initialized the filterData array as follows:

filterData: [
     {key: 'name', value: ''},
     {key: 'surname', value: ''},
     {key: 'age', value: ''}

Next, my objective is to link my filter inputs to achieve something like this:

<v-text-field v-model="filterData.value.where(filterData.key == 'Name')"> 
</v-text-field>

Subsequently, I intend to pass the filterData to the APIController and construct a GET request in the following manner:

getfiltereddata(data) {
    var url = `/user?filtereddata=true`;
    data.forEach(element => {
    url = url + `&` + element.key + `=` + element.value;
}); //I will verify if the value is not empty first

The final output should resemble this format:

/user?filtereddata=true&name=nameinput&surname=surnameinput&age=ageinput;

Your assistance with this matter would be greatly appreciated.

Answer №1

If you're looking to iterate through the filterData array and connect each object to an input field, you can use this code snippet:

<template v-for="(data,index) in filterData">
    <v-text-field  v-model="filterData[index].value"> 
   </v-text-field>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing the element generated by Angular from the DOM

I've hit a roadblock with this issue. Here is the delete function in my mainController. $scope.delete = function($posts) { $http.delete('/api/posts/' + $posts._id) .success(function(data) { // remove element from DOM ...

Conceal the nearest parent element above using JavaScript (or jQuery)

I need to implement a functionality where clicking a button hides a specific HTML class. The structure of the HTML is as follows: <thead> <tr class="employee-list"> <th> <button class="show-emp">S ...

Which Angular component, directive, or pipe would be best suited for creating dynamic HTML content similar to this?

(I am transitioning from React to Angular, so please bear with me if my question has a hint of React influence.) I am in need of developing an Angular component that can accept a string along with a list of terms within that string for displaying tooltips ...

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

Turn off Satellizer Popup Window Title Bar

Currently, I am implementing the satellizer plugin for Facebook authentication. However, I have encountered an issue with the default popup login window of Facebook, which includes a title bar and menu options. I would like to transform this popup into a m ...

Troubleshooting the Ng2-Charts Linechart to display all values instead of just the first two

Starting a new Angular application with the Angular-CLI (beta 22.1) has presented an issue when adding test data (5 values) to a chart. The scaling appears incorrect, displaying only the first two values stretched across the entire length of the graph (ref ...

How are objects typically created in Node.js applications?

These code snippets are from Node.js tests, and I am curious about why one method of instantiating an object is favored over another? // 1 var events = require('events'); var emitter = new events.EventEmitter(); emitter.on('test', doSo ...

Tips on incorporating "get_template_directory_uri" into a JavaScript function

I am currently working on my WordPress PHP file code, where I have included a JavaScript snippet to display names and images from a query. While the names are being displayed correctly, I am encountering an issue with the images not showing up. After tryi ...

@keyframes shimmering-fade

I'm attempting to create a text animation effect (please see video) but I'm struggling to find the solution!! Can someone assist me with this? Should I use JavaScript for a better result? h1.fadeinone { animation: fadeinone 10s;} h1.fadeintwo ...

Using babel with node.js version 18 allows you to easily import modules with various extensions and run them from the build folder configured with commonJS. Ensure that you have specified "type:module"

I'm currently utilizing Node.JS version 18.20.4 alongside Babel. Below is my babel.config.json: { "presets": [ [ "@babel/preset-env", { "targets": { "node": 18 }, ...

Controlling opacity with jQuery animate() function using a click event

I have a specific requirement for an animation. When the button is clicked, I need the element to transition from 0 opacity to full 1 opacity within 300 milliseconds. The issue I am facing is that when the button is clicked, the animation does not work a ...

Looking to incorporate jQuery Form Wizard with mandatory radio button groups?

Currently, I am utilizing the jQuery Form Wizard plugin from The Code Mine website to transform a form into a wizard format. Myform consists of five pages, each containing approximately four radio buttons. It is crucial that at least one radio button on ea ...

Is styling in React not showing up?

Currently, I am tackling a third-party pagination component in Reactjs. The npm package instructs me to include the line import "rc-pagination/assets/index.css"; in the file. However, despite injecting the index.css into the DOM using the style loader, I ...

How to disable the underline link button feature in Vue.js and Vuetify

When working on the frontend of my project using Vue.js and Vuetify framework, I often use buttons. Here is an example: <v-btn class="ma-2" outlined color="success" width="150px" ...

Executing an xajax/ javascript function simultaneously

Is there a way to simultaneously execute the same function? Here is an example: function convert_points() { show_loading(); xajax_ConvertPoints(); xajax_GetRegularGamingCards(); } When xajax_ConvertPoints is called, there seems to be a mill ...

Error: The AjaxMethod "Class" is not defined

I have an older asp.net project that utilizes Ajax.AjaxMethod() to invoke server-side code from Javascript. It used to function properly, but now it has suddenly ceased to work. Here is the C# code behind: public partial class Signup : System.Web.UI.Page ...

Retrieving the current user using Vue/Axios within the Laravel framework

Currently, I am looking for the most efficient way to load the current user into my Vue app in order to access the username and ID from any component or route. At this point, I have attempted the following approach: app.js new Vue({ el: '#app&apos ...

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...

Building Your Own Array Object in JavaScript

Yes, it may seem crazy at first glance, but let me clarify things a bit. When using Jquery, for instance $('div'), it returns an Array Collection similar to this: [div#container, div#header, div#logo]. The interesting part is that primitive Arra ...

Proper techniques for testing an AngularJS Controller Function

Recently, we integrated jasmine tests into our AngularJS project and I have a query: We are looking to write tests for this controller function: $scope.deleteClick = function () { $scope.processing = true; peopleNotesSrv.deleteNote($scope ...