Adding Input Value Into An Object (Vue.js)

Question

I'm trying to create a table that contains a bunch of input text fields. My goal is to get the value of an input, and add it into an object with the row ID as the key. I tried to use v-model, but I lost. I actually managed to get all necessary pieces, but I couldn't put them together. So, I hope someone can help me on that.

Here is my input box:

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

The function:

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

And vue.js data structure:

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

When I type something in the input, I'm getting these 3 errors:

[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

I don't understand what is undefined because when I try console log obj, key, and inputValue, I'm getting the correct values.

tony19 · Accepted Answer · 2022-07-16 00:26:04Z

1

The error is related to Vue.set/this.$set, so the problem is likely on this line:

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

It indicates that the first/target argument (i.e., this.form.obj) is either undefined, null, or a primitive (i.e., string, number, Symbol, boolean). Since this.form is declared as new Form(), the problem is likely inside the Form class (whose source is not posted in the question). Let's look at the three possibilities...

`form.obj` is `undefined`

Form does not declare obj

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

Form sets obj to undefined

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

`form.obj` is `null`

Form sets obj to null

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

`form.obj` is a primitive

Form sets obj to a value that is either string, number, symbol, or 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

The fix would be to declare obj as an object:

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

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <input
  type="text"
  :id="['tv_code_' + listItem.asset_id]"
  @input="getInputValue('tv_code', listItem.asset_id)"
>
  <pre>{{form.obj}}</pre>
</div>

edited Jul 16, 2022 at 0:26

answered Feb 23, 2019 at 2:55

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bulent Over a year ago

Thanks for your reply Tony. You are right about the source of the issue. Actually, I don't have any object called 'obj'. I was trying to pass an argument. But it looks for form.obj instead of form.tv_code. I think I need to make some researches about passing argument on Vue.js. document.getElementById(obj + "_" + key).value works perfectly fine with argument and it gives me the correct IDs which are tv_code_1, tv_code_2, .... tv_code_n. Thanks again.

Collectives™ on Stack Overflow

Adding Input Value Into An Object (Vue.js)

1 Answer 1

`form.obj` is `undefined`

`form.obj` is `null`

`form.obj` is a primitive

Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

form.obj is undefined

form.obj is null

form.obj is a primitive

Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

`form.obj` is `undefined`

`form.obj` is `null`

`form.obj` is a primitive