vue v-model 지시문의 개체 경로로 점 구분 문자열을 사용하는 방법

vue v-model 지시문의 개체 경로로 점 구분 문자열을 사용하는 방법

데이터 레코드가 있습니다.

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

필드를 설명하는 객체의 배열

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

그리고 형태를 만들어내려고 한다.

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

수 있습니다.address.name는 v-model 한다는 했습니다.record[address][city]점으로 구분된 문자열부터 어떻게 해야 할까요?

가능합니까?

const getPathInObject = (path, object) => {
  const [current, ...rest] = path.split('.')
  return rest.length === 0
    ? object[current]
    : getPathInObject(rest.join('.'), object[current])
}

document.write(getPathInObject('a.b.c.d', { a: { b: { c: { d: 'hello' } } } }))

편집 maybe something like this. verry hacky though

const unflatten = obj => {
  const result = {};
  Object.entries(obj).forEach(([key, value]) => {
    const [a, b] = key.split('.');
    result[a] ||= {};
    result[a][b] = value
  })
  return result
}


new Vue({
  el: "#app",
  data: {
    record_flat: {"address.city": '', "address.country": ''},
    fields: [ 
  {   name: "address.city", label: 'city'  },
  {   name: "address.country", label: 'country'  }
]
  },
  computed: {
    record: ({ record_flat }) => unflatten(record_flat),
  }
})

<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="record_flat[name]" /> 
     <br>
  </div>
  <hr>Value of record = {{ record }}
</div>

하였습니다.:value ★★★★★★★★★★★★★★★★★」@input, ★★★★★★★★★★★★★★★★」v-model 로다쉬 ★★★로다쉬.get ★★★★★★★★★★★★★★★★★」set

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

언급URL : https://stackoverflow.com/questions/70215277/how-to-use-dot-delimited-string-as-object-path-for-vue-v-model-directive