Using Vuetify to Create Dynamic Property Bindings

I have a form with a variety of dynamic input components, such as v-selects and v-text-fields, that users need to fill out. However, I am having trouble figuring out how to retrieve the values from these inputs once the form is submitted. Here is an example of my input setup:

<v-row>
  <v-col
    v-for="(item, index) in documentTags.tags"
    :key="index"
    cols="18"
    sm="8"
    md="6"
  >
    <v-select
      v-if="item.InputType === 'Combobox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :items="item.TagValueOptions"
      :rules="rules.ComboboxRule"
      item-text="Value"
      :label="item.Name"
      required
    >
    </v-select>
    <v-text-field
      v-else-if="item.InputType === 'Textbox'"
      :v-model="documentTagResponses[index]"
      :name="item.Name"
      :label="item.Name"
      :rules="rules.TextboxRule"
      required
    >
    </v-text-field>
  </v-col>
</v-row>

Here is an excerpt from my documentTags definition:

{
  tags: [
    {
      TagDefinitionId: '1',
      InputType: 'Combobox',
      Name: 'Name_1',
      TagValueOptions: [
        {
          Value: 'Option 1',
        },
        {
          Value: 'Option 2',
        },
        {
          Value: 'Option 3',
        },                
      ],
    },
    {
      TagDefinitionId: '2',
      InputType: 'Textbox',
      Name: 'Name_2',
      TagValueOptions: [],
    },
  ],
}

I want to store the responses from these inputs in an array called documentTagResponses. For instance:

export default {
name: 'MyModal',
data: () => ({
    documentTagResponses: [],
}),
methods: {
    validate() {
        const valid = this.$refs.form.validate();
        if (valid) { 
            for (const key of Object.keys(this.documentTagResponses)) {
                console.log(`${key} -> ${this.documentTagResponses[key]}`);
            }
        }
    },
};

When the user clicks the submit button, I call the validate function to check the components' validity and then do something with the values. However, I'm struggling because my documentTagResponses array always appears empty. Can someone help me figure out why I can't access the values set in these components?

Answer №1

After incorporating your code into my project, I found that the issue lay with :v-model. It turns out we don't actually need to include : before v-model.

Here's the revised version of the code:

<v-row>
  <v-col
    v-for="(item, index) in documentTags.tags"
    :key="index"
    cols="18"
    sm="8"
    md="6"
  >
    <v-select
      v-if="item.InputType === 'Combobox'"
      v-model="documentTagResponses[index]"
      :name="item.Name"
      :items="item.TagValueOptions"
      :rules="rules.ComboboxRule"
      item-text="Value"
      :label="item.Name"
      required
    >
    </v-select>
    <v-text-field
      v-else-if="item.InputType === 'Textbox'"
      v-model="documentTagResponses[index]"
      :name="item.Name"
      :label="item.Name"
      :rules="rules.TextboxRule"
      required
    >
    </v-text-field>
  </v-col>
</v-row>

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

I'm having some trouble with scrapy - whenever I try to extract data from a page, I can only seem to get the first record. How can I

I am currently exploring Scrappy for web scraping and trying to implement a similar example from (link ) to crawl Craigslist. However, when I execute my code, I am only able to fetch the first entry on each page. The sample output from the code snippet pr ...

What is the best way to transform the incoming data using JavaScript?

The data I have from Algolia in my project includes a seconds data presented as an array. This is the method I use to extract the seconds data from Algolia: @if(isset($content['length'])) <div class="flex items-center space-x-6"> ...

Using JQuery to duplicate text and insert it into a textarea

Looking for a more efficient way to achieve the same functionality with my JavaScript function. Currently, it copies text from a hidden span and inserts it into a textarea on a website after a few clicks. Any ideas on how to streamline this process? It&apo ...

"Using Angular, when $event is triggered on multiple child elements, each child

I am facing an issue with my html element in the application: .html <a (click)="onOpen($event)"> <i class="fa fa-file-text-o"></i> <p>Profile</p> </a> .ts onOpen(event):void { console.log( event.target ) ...

Angular is failing to retrieve data from FS.readFile using promises

My goal is to utilize an Angular service to decide whether to call fs.readFile or fs.writeFile based on the button pressed, in order to explore the interaction between node and angular promises. Although I have managed to read and write files, I am facing ...

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Recently, I implemented a fetch feature using TypeScript for my NextJS 13 project. As I am still getting familiar with TypeScript, I wanted to double-check if my approach is correct and if there are any potential oversights. Here is the code snippet from ...

Consistent height for h2 containers across all CSS grid columns

Is there a way to ensure all h2 containers have the same height, both with JavaScript and without it? The h2 titles are dynamic and can vary in length, but I want to maximize the space for all containers. img { max-width: 100%; height: auto; } .gri ...

Tips for updating text in a freshly opened window using JQuery or JavaScript

I have a function that is triggered by a button click to open a new window or tab, display an alert, and update text. Here is the code snippet: function nWin(p) { var setStyle = "<style rel='stylesheet'>\ .vTop {\ ...

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

Highlighting Text in VueJS event

I am currently working with a data table that has clickable rows. Everything is functioning properly, but I have run into an issue. When I try to highlight text within the row, it triggers the click event. I attempted to use the .exact modifier in hopes of ...

Arrange the array in ascending order based on a specific value

Within my array, I have various objects of different types: myArray = [ {state: "enabled", name: "zName"}, {state: "trying", name: "aName2"}, {state: "disabled", name: "aName3"}, {state: "dis ...

Tips for integrating highcharts plugins with highcharts-vue (highcharts vue wrapper)

Currently, I am utilizing the Vue wrapper for Highcharts called highcharts-vue(https://github.com/highcharts/highcharts-vue). However, I am facing an issue where I need to detect the event of a right mouse click (contextmenu) on the chart. To address this, ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...

How can I position a div in the center of a fullpage.js slide?

I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...

JavaScript library for making HTTP requests

Can someone provide guidance on creating a JavaScript command line application that interacts with a public API using an HTTP client library? What is the preferred JavaScript HTTP library for this task? ...

React and Redux: The Search for Missing Props

I am embarking on a new project using a different technology stack for the first time. In my previous job, I inherited an existing project with everything already set up. However, I am facing issues as my props are coming up as undefined and I am unsure wh ...

Ensure that an input field on the PHP form is required

Currently working on a form with multiple input fields. I'm wondering if there's a way to prevent the form from being submitted to the server if a specific field is left empty. I'd like to use a JavaScript pop-up box to notify the user inst ...

What is the method for determining the required or imported base path?

My package.json includes the main option to set the default file for importing like import 'my-index' from 'my-module' However, I would like to break up my-module into separate files so developers can include them individually with sta ...

Having trouble with Next.js and Next-auth? When I make an HTTP request in getServerSideProps, getSession is returning null in my secured API Route

I am currently working on securing an API Route that is being called from both the Client and Server-side on different pages. When accessing the test page, it returns a 401 error. However, when accessing the test2 page, the content is retrieved successfu ...