Добавление входного значения в объект (Vue.js)

Question

Я пытаюсь создать таблицу, которая содержит набор входных текстовых полей.Моя цель - получить значение ввода и добавить его в объект с идентификатором строки в качестве ключа.Я пытался использовать v-model, но я проиграл.Мне действительно удалось собрать все необходимые кусочки, но я не мог их собрать.Итак, я надеюсь, что кто-то может помочь мне в этом.

Вот мое поле ввода:

<input
  type="text"
  :id="['tv_code_' + listItem.asset_id]"
  @input="getInputValue('tv_code', listItem.asset_id)"
>

Функция:

getInputValue(obj, key) {
  var inputValue = document.getElementById(obj + "_" + key).value;
  if (inputValue.length > 0) { 
    this.$set(this.form.obj, key, inputValue);
  } else {
    this.$delete(this.form.obj, key);
  }
}

И структура данных vue.js:

data(){
  form: new Form({
    tv_code: {}
  })
}

Когда я набираю что-то на входе, я получаю следующие 3 ошибки:

[Vue warn]: Cannot set reactive property on undefined, null, or primitive value: undefined
[Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for '1' in undefined"
TypeError: Cannot use 'in' operator to search for '1' in undefined

Я не понимаю, что такое undefined, потому что, когда я пытаюсь использовать консольlog obj, key и inputValue, я получаю правильные значения.

Answer 1

Ошибка связана с Vue.set / this.$set, поэтому проблема вероятна в этой строке:

 this.$set(this.form.obj, key, inputValue)

Указывает, что первый / целевой аргумент (т.е., this.form.obj) является либо undefined, null, либо примитивом (т. Е. string, number, Symbol, boolean).Поскольку this.form объявлен как new Form(), проблема, скорее всего, внутри класса Form (источник которого не указан в вопросе).Давайте посмотрим на три возможности ...

form.obj это undefined

• Form не объявляет obj

  class Form {
    constructor() {
      /* no obj anywhere */  // DON'T DO THIS
    }
  }
  

• Form устанавливает obj в undefined

  class Form {
    constructor() {
      this.obj = undefined;  // DON'T DO THIS
    }
  }
  

form.obj is null

• Form устанавливает obj в null

  class Form {
    constructor() {
      this.obj = null;      // DON'T DO THIS
    }
  }
  

form.obj является примитивом

• Formустанавливает obj значение, равное string, number, symbol или boolean

  class Form {
    constructor() {
      this.obj = 'foo';     // DON'T DO THIS
      this.obj = 1;         // DON'T DO THIS
      this.obj = Symbol();  // DON'T DO THIS
      this.obj = true;      // DON'T DO THIS
    }
  }
  

Solution

Исправлениебыло бы объявить obj как объект:

class Form {
  constructor() {
    this.obj = { /*...*/ };
  }
}

class Form {
  constructor({ tv_code }) {
    this.tv_code = tv_code;
    this.obj = { foo: null };
  }
}

new Vue({
  el: "#app",
  data() {
    return {
      listItem: {
        asset_id: 'foo'
      },
      form: new Form({
        tv_code: {}
      }),
    };
  },
  methods: {
    getInputValue(obj, key) {
      const inputValue = document.getElementById(obj + "_" + key).value;
      if (inputValue.length > 0) {
        this.$set(this.form.obj, key, inputValue);
      } else {
        this.$delete(this.form.obj, key);
      }
    }
  }
});

  
  {{form.obj}}