将输入值添加到对象（Vue.js）

Question

我正在尝试创建一个包含一堆输入文本字段的表。我的目标是获取输入的值，并将其添加到以行ID为键的对象中。我尝试使用 v-model ，但我输了。实际上，我设法获得了所有必要的部件，但无法将它们放在一起。所以，我希望有人能在这方面帮助我。

这是我的输入框：

功能：

  getInputValue（obj，key）{
  var inputValue = document.getElementById（obj +“ _” +键）.value;
  如果（inputValue.length> 0）{
    this。$ set（this.form.obj，key，inputValue）;
  }其他{
    this。$ delete（this.form.obj，key）;
  }
}
 

vue.js数据结构：

  data（）{
  表格：新表格（{
    电视代码：{}
  }）
}
 

当我在输入中输入内容时，出现以下3个错误：

  [Vue警告]：无法对未定义，空值或原始值设置反应性属性：未定义
[Vue警告]：v-on处理程序中的错误：“ TypeError：无法使用'in'运算符在未定义的位置搜索'1'”
TypeError：无法使用“ in”运算符在未定义的位置搜索“ 1”
 

我不明白什么是 undefined ，因为当我尝试控制台日志时， obj ， key 和 inputValue ，我得到了正确的值。

Answer 1

该错误与Vue.set / this.$set有关，因此此行可能有此问题：

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

它指示第一个/目标参数（即this.form.obj）是undefined，null或原始变量（即string，{{1} }，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

• 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 } } 声明为对象：

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);
      }
    }
  }
});