多个输入输出单个对象

Question

我正在尝试更新代表CSS网格布局的对象。我要支持两种输入方法。您可以将网格格式输入为字符串，也可以将数字输入和单位下拉列表组合使用。我目前所拥有的不允许我输入字符串。任何帮助将不胜感激。

更新：Boussadrja建议向模型中添加惰性修饰符确实解决了该问题，但是我想知道是否可以在您键入而不是在字段退出时进行更新？ / p>

<template>
  <div class="testing">
    {{grid}}
    <div>
      <input type="text" id="input-add-column-text" v-model="columnsString">
    </div>
    <div v-for="(column, index) in grid.columns" v-bind:key="'column_' + index">
      <input type="number" min="0" step="0.25" v-model.number="column.value">
      <select name="" id="" v-model="column.unit">
        <option v-for="(option, index) in unitOptions" v-bind:value="option.value" v-bind:key="index">{{ option.text }}</option>
      </select>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'testing',
  data: () => ({
    grid: {
      columns: [
        { value: 1, unit: 'fr' },
        { value: 1, unit: 'fr' },
        { value: 1, unit: 'fr' },
        { value: 1, unit: 'fr' }
      ]
    },
    unitOptions: [
      { text: 'fr', value: 'fr' },
      { text: 'px', value: 'px' },
      { text: '%', value: '%' },
      { text: 'em', value: 'em' },
      { text: 'auto', value: 'auto' },
      { text: 'min-content', value: 'min-content' },
      { text: 'max-content', value: 'max-content' },
      { text: 'minmax', value: 'minmax' }
    ]
  }),
  computed: {
    columnsString: {
      get: function () {
        let columnsString = ''

        for (let column of this.grid.columns) {
          columnsString += column.value + column.unit + ' '
        }

        return columnsString
      },
      set: function (newValue) {
        let columnValues = newValue.match(/[+-]?\d+(?:\.\d+)?/g).map(Number)
        let columnUnits = newValue.match(/(fr|px|%|em|auto|min-content|max-content|minmax)/g).map(String)

        this.grid.columns = _.zipWith(columnValues, columnUnits, function (a, b) {
          let columns = {
            value: a,
            unit: b
          }

          return columns
        })
      }
    }
  }
}
</script>