Dynamic v-model for a group in Vue2

Question

Dynamic v-model for a group in Vue2

I am currently working on a housing form and I have encountered a roadblock that I need assistance with. Essentially, when a user selects that their house has 2 floors in the form, they are then prompted to input the number of rooms, toilets, balconies, etc. for each floor.

The challenge I am facing is how to effectively "group" these responses so that I can send them to the backend and interpret the answers correctly.

Here is what I have attempted thus far:

data() {
  return {
    flooroptions: [
      {
        name: 'Rooms',
        id: '1',
      },
      {
        name: 'Balcony',
        id: '2',
      },
      {
        name: 'Toilets',
        id: '3',
      },
    ],
    floors: '',
    floor1: [],
  },
}

By looping through like this:

<div class="" v-for="(opt, index) in flooroptions">
  <input type="number" name="" value="" v-model="floor1[index]">
</div>

I am able to view my data using floor1:

{{ floor1 }}

However, if a user only inputs that the first floor has 2 rooms without adding any other information, I only receive 2 within floor1.

What would be the most effective approach to tackle this issue?

PS. Each floor will go through this flooroptions loop allowing users to input the number of each option for every floor, and my goal is to accurately interpret those numbers.

javascript forms vue.js v-model

Answer 1

Answer №1

If my understanding is correct, then I would...

data() {
  return {
    roomOptions: [
    {
      name: 'Bedrooms',
      id: '1',
    },
    {
      name: 'Bathrooms',
      id: '2',
    },
    {
      name: 'Kitchen',
      id: '3',
    },
    ],
    numRooms: 2,
    roomData: [
      {'Bedrooms': 0, 'Bathrooms': 0, 'Kitchen': 2},
      {'Bedrooms': 2, 'Bathrooms': 1, 'Kitchen': 0}
    ],
  },
}

and iterate through the options like this:

<div v-for="r in numRooms">
  <div class="" v-for="opt in roomOptions">
    <input type="number" name="" value="" v-model="roomData[r][opt.name]">
  </div>
</div>

or... if you prefer to pass minimal data and know the ids on the backend

data() {
  return {
    roomOptions: {
      1: {
        name: 'Bedrooms'
      },
      2: {
        name: 'Bathrooms'
      },
      3: {
        name: 'Kitchen'
      },
    },
    numRooms: 2,
    roomData: [
      {1: 0, 2: 0, 3: 2},
      {1: 2, 2: 1, 3: 0}
    ],
  },
}

and loop through like this:

<div v-for="r in numRooms">
  <div class="" v-for="(opt, i) in roomOptions">
    <input type="number" name="" value="" v-model="roomData[r][i]">
  </div>
</div>

Answer 2

If my understanding is correct, then I would...

data() {
  return {
    roomOptions: [
    {
      name: 'Bedrooms',
      id: '1',
    },
    {
      name: 'Bathrooms',
      id: '2',
    },
    {
      name: 'Kitchen',
      id: '3',
    },
    ],
    numRooms: 2,
    roomData: [
      {'Bedrooms': 0, 'Bathrooms': 0, 'Kitchen': 2},
      {'Bedrooms': 2, 'Bathrooms': 1, 'Kitchen': 0}
    ],
  },
}

and iterate through the options like this:

<div v-for="r in numRooms">
  <div class="" v-for="opt in roomOptions">
    <input type="number" name="" value="" v-model="roomData[r][opt.name]">
  </div>
</div>

or... if you prefer to pass minimal data and know the ids on the backend

data() {
  return {
    roomOptions: {
      1: {
        name: 'Bedrooms'
      },
      2: {
        name: 'Bathrooms'
      },
      3: {
        name: 'Kitchen'
      },
    },
    numRooms: 2,
    roomData: [
      {1: 0, 2: 0, 3: 2},
      {1: 2, 2: 1, 3: 0}
    ],
  },
}

and loop through like this:

<div v-for="r in numRooms">
  <div class="" v-for="(opt, i) in roomOptions">
    <input type="number" name="" value="" v-model="roomData[r][i]">
  </div>
</div>

Dynamic v-model for a group in Vue2

Answer №1

Similar questions

What could be causing the JSON String decode error to occur while utilizing extjs ajax?

Tips for creating line breaks in Google Chart tooltips

Best practices for consuming streams using jQuery

Exploring the capabilities of nested WebGL render targets in the three.js library

Using `require` can be successful even if `qs` is not defined

How can changes be spread to other stores within the react flux flow?

Calculate the number of rows in a table that contain identical values

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

Troubleshooting Vue.js unit test issues caused by log messages from internal components

What is the best way to incorporate Vue.js component dependencies into a multi-page application (MPA

Is there a way to convert various elements sharing the same class into a list of array items?

Reducing the size of a Vue project

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

Using Angular 4 with Bootstrap dropdowns necessitates the use of Popper.js

Calculating the time gap between two consecutive "keyup" occurrences

Extracting the name from a JSON key/value pair and then adding it to a TextField

Command to conceal components for users visiting as guests

Ways to designate ROLES within the _user database on Cloudant

Use the column name instead of the index with Jquery's eq() function

sending a parameter in the reverse url using JavaScript