Question

我有一个locker对象，有一堆字段和一个lots对象数组 - 都是通过props传入的。对于 locker 对象，其中一个字段包含id数组中特定lot的{{1}}。像这样：

lots

locker: { locker_num: 'AH3', part_of_lot: '235', allocation: '' , etc...}对象是一个对象数组，结构为：

lots

我正在尝试向用户提供一个表单来编辑lots: [ { id: '234', sl_num: '567', etc... }, { id: '235', sl_num: '567', etc... }, { id: '236', sl_num: '567', etc... }, { id: '237', sl_num: '567', etc... }, ... etc ]对象。对于locker字段，我想提供part_of_lot输入。这是我的代码：

select

这可以按预期工作 - 但只有在<select class='form-control' v-model='locker.part_of_lot.id'> <option disabled value=''>Choose a Lot</option> <option v-for='l in lots' :selected="l.id === locker.part_of_lot.id" :value='l.id'>{{ l.sl_num }}</option> </select>的{{1}}字段中已有值时才会生效。如果我的part_of_lot字段为空locker，则上述操作失败。错误是locker。

那么我如何设置part_of_lot输入来处理这两种情况：1）当Cannot read property 'id' of null已经有值时2）当select为空时？

修改

如果我创建的方法只检查part_of_lot值是否为part_of_lot，如果是，则将其更改为字符串part_of_lot，则上述代码可以正常工作。但这似乎是一个笨拙的工作。难道不应该有一个更优雅的方式来处理这个？我觉得在其他模型上可能有很多很多其他字段，其值null需要在模板中处理。

Answer 1

如果通过道具传递part_of_lot，您可以为它设置默认值：

  props: {
     part_of_lot: {
        type: String,
        default: ""
     }
  }

vuejs props doc

您还可以在数据中添加新字段：

{
 data: function (){
   return {
     new_part_of_lot: this.locker.part_of_lot || "";
   }
 }
}

然后使用new_part_of_lot而不是part_of_lot。

Answer 2

您可以使用partOfLotID和get方法创建计算属性set，引用locker.part_of_lot对象并处理null值的大小写：

computed: {
  partOfLotID: {
    get() {
      let part = this.locker.part_of_lot;
      return (part) ? part.id : '';
    },
    set(value): {
      let part = this.locker.part_of_lot;
      if (part && typeof part === 'object') {
        this.locker.part_of_lot.id = value;
      } else {
        this.locker.part_of_lot = { id: value };
      }
    }
  }
}

然后只需在partOfLotID中使用select：

<select class='form-control' v-model='partOfLotID'>
  <option disabled value=''>Choose a Lot</option>
  <option 
    v-for='l in lots' 
    :selected="l.id === partOfLotID" 
    :value='l.id'
  >
    {{ l.sl_num }}
  </option>
</select>

Answer 3

我使用的解决方案是使用一种方法检查part_of_lot的值，如果它为null，则将其更改为""。像这样：

created () {
    this.setToStrings()
  },
  methods: {
    setToStrings () {
      // Simply replaces null values with strings=''
      if (this.locker.part_of_lot === null) {
        this.locker.part_of_lot = ''
      }
      return this.locker
    },

VueJS - 初始值为空时选择表单输入

3 个答案: