VueJS Multiple level objects $SET

Question

I'm trying to set the value of an object inside another with an input, but it doesn't work.

The objects starts empty in data

    data(){
        form: {}
    }

Then, in beforeMount, i fill the objects with n values in the first level, and other n values inside them (i don't know how many values neither their names)

    this.form: {
        s1: {
            name: 'test'
        },
        s2: {
            test: '123'
        }
    }

Finally, when i use an event or in the v-model to set the value, nothing happends. The input stays with the initial value.

I thought that this.$set might be the solution, but it only works if the object has only one level

    this.$set(this.form['s1'], 'name', 'New Value');

Basic example:

    <template>
        <q-input filled v-model="form['s1']['name']" label="Filled" />
    <script>
    
    export default {
      name: 'APP',
    
      components: {
        
      },
    
      data () {
        return {
          form: {},
        }
      },
      beforeMount() {
        this.form['s1'] = {};
        this.form['s1']['name'] = "Test";
      }
    }
    </script>

This is the basic minimum example running with quasar, but it happends also in vue-native(React-Native) using native-base's text inputs, and elementjs.

tony19 · Accepted Answer · 2022-07-16 00:27:35Z

1

You can use Object.assign in following way as described in documentation. It must be reactive.

export default {
      name: 'APP',
      components: {},
      data () {
        return {
          form: {},
        }
      },
      beforeMount() {
        this.form = Object.assign({}, this.form, {
             s1: {
                name: 'test'
              },
             s2: {
                test: '123'
              }
          });
        // this.form['s1'] = {};
        // this.form['s1']['name'] = "Test";
      }
    }
    </script>

edited Jul 16, 2022 at 0:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 24, 2021 at 5:45

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

VueJS Multiple level objects $SET

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related