Tips for utilizing a dot-separated string as the object path for the v-model directive in Vue

Question

Tips for utilizing a dot-separated string as the object path for the v-model directive in Vue

I am working with a data record

record: {
  address: {
   city: ""
  }
}

There is an array of objects that describe fields

fields: [ 
  {
    name: "address.city"
    ...
  }
]

My objective is to generate a form dynamically

    <b-field
      v-for="field in fields"
      :key="field.name"
      :label="field.label"
    >
      <b-input v-model="record[field.name]" />
    </b-field>

I need to access object items using keys like address.name.

Although I understand that I should use record[address][city] for the v-model, how can I achieve this from a dot-delimited string?

Is there a way to make it work?

javascript vue.js vuejs2

Answer 1

Answer №1

function accessNestedObject(path, obj) {
  const [currentKey, ...remainingKeys] = path.split('.');
  return remainingKeys.length === 0
    ? obj[currentKey]
    : accessNestedObject(remainingKeys.join('.'), obj[currentKey]);
}

document.write(accessNestedObject('x.y.z.w', { x: { y: { z: { w: 'world' } } } }))

CORRECTION perhaps a solution like this. quite hacky though

function unflattenObject(obj) {
  const result = {};
  Object.entries(obj).forEach(([key, value]) => {
    const [firstKey, secondKey] = key.split('.');
    result[firstKey] ||= {};
    result[firstKey][secondKey] = value;
  });
  return result;
}

new Vue({
  el: "#app",
  data: {
    flatRecord: {"personal.firstName": '', "personal.lastName": ''},
    fields: [ 
      { name: "personal.firstName", label: 'First Name' },
      { name: "personal.lastName", label: 'Last Name' }
    ]
  },
  computed: {
    record: ({ flatRecord }) => unflattenObject(flatRecord),
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="{name, label} in fields" :key="name">
     <label>{{ label }}</label><input v-model="flatRecord[name]" /> 
     <br>
  </div>
  <hr>Value of record = {{ record }}
</div>

Answer 2

function accessNestedObject(path, obj) {
  const [currentKey, ...remainingKeys] = path.split('.');
  return remainingKeys.length === 0
    ? obj[currentKey]
    : accessNestedObject(remainingKeys.join('.'), obj[currentKey]);
}

document.write(accessNestedObject('x.y.z.w', { x: { y: { z: { w: 'world' } } } }))

CORRECTION perhaps a solution like this. quite hacky though

function unflattenObject(obj) {
  const result = {};
  Object.entries(obj).forEach(([key, value]) => {
    const [firstKey, secondKey] = key.split('.');
    result[firstKey] ||= {};
    result[firstKey][secondKey] = value;
  });
  return result;
}

new Vue({
  el: "#app",
  data: {
    flatRecord: {"personal.firstName": '', "personal.lastName": ''},
    fields: [ 
      { name: "personal.firstName", label: 'First Name' },
      { name: "personal.lastName", label: 'Last Name' }
    ]
  },
  computed: {
    record: ({ flatRecord }) => unflattenObject(flatRecord),
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="{name, label} in fields" :key="name">
     <label>{{ label }}</label><input v-model="flatRecord[name]" /> 
     <br>
  </div>
  <hr>Value of record = {{ record }}
</div>

Answer 3

Answer №2

Instead of using v-model, I opted for :value and @input. I also utilized lodash's get and set

      <b-input
        :value="get(data, field.name)"
        @input="set(data, field.name, $event)"
      />

Answer 4

Instead of using v-model, I opted for :value and @input. I also utilized lodash's get and set

      <b-input
        :value="get(data, field.name)"
        @input="set(data, field.name, $event)"
      />

Tips for utilizing a dot-separated string as the object path for the v-model directive in Vue

Answer №1

Answer №2

Similar questions

Setting ng-click on a custom element directive in Angular 1.x: A guide

Limiting the size of image uploads in AWS S3

Is it possible that MapBoxGL installation with Expo doesn't function properly for web?

Paste a URL into the input field to view it on the current page

Ensuring Typescript returns the accurate type depending on given parameters

Is there a way to import cookies from different browsers into an asp.net application?

Dynamic Text Labels in Treemap Visualizations with Echarts

How can resolvers in GraphQL optimize data fetching based on necessity?

Is there a way to compress the selected item in arrays in react native?

Tips for monitoring transactions/events on a particular wallet with ethers.js?

Customize v-text-field label styling using Vuefity translate

The resizing issue of Textarea during transitions

magnific popup: trigger the display by clicking on an element other than the image

Exploring the Dev Tools Console feature in Excel for Windows

How to add a jQuery function to a Rails 3 if statement?

Module 'esprima' not found

Having trouble with filtering an array using the some() method of another array?

Nuxt js is throwing an error stating that it is unable to locate the pages directory

When utilizing the dojox.grid.enhanceGrid function to delete a row, the deletion will be reflected on the server side but

Tips for performing calculations using autopostback without experiencing any distracting screen flicker