CODEWITHSUNDEEP
javascriptvuejs2vue.js
Don Smythe
Don Smythe

Reputation: 9814

VueJS access model from method

In VueJS I am setting model data based on user actions. I want to access the model from a method to update an element.

In the code below, when the user changes the first select list, I want to update the second select list to show the id property of the first list. As it is the upper list works OK but the lower list id property is not updated on upper list change:

<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
</head>
<body>
        <div id="editor">
            <form id="query" methods="GET">
            <div id="form_container" class="row">
                        <div class="form-group">
                            <label for="choice-selector">Choices</label>
                            <select class="form-control" id="choice-selector" v-model="choice_id" v-on:change="refreshOptions">
                              <option v-for="item in choices" v-bind:value="item.id">
                                {{ item.name }}
                              </option>
                            </select>
                            <span>Current choice id: {{ choice_id }}</span>
                            <br>
                            <label for="option-selector">Options</label>
                            <select class="form-control" id="option-selector" v-model="option_id" >
                                <option v-for="item in options" v-bind:value="item.id">
                                    {{ item.name }}
                                </option>
                            </select>
                            <span>Current option id: {{ option_id }}</span>
                        </div>
            </div>
        </div>

    <script>
    let index = 0;
    new Vue({
        el: '#editor',
        data: {
            choice_id: '1',
            choices: [
              { id: '1', name: 'Choice A' },
              { id: '2', name: 'Choice B' },
              { id: '3', name: 'Choice C' }
            ],
            option_id: '1',
            options: [
            ]
          },
        ready: function startFetch() {
          this.refreshOptions();
        },
        methods: {
          refreshOptions: function refreshOptionList() {
            console.log(">>refreshOptionList() index:" + index);
            const vm = this;
            const newOptions = [{ id: index, name: 'Option based on choices list id: ' + vm.choice_id }];
            vm.$set('options', newOptions);
            index += 1;
          }
        },
      });
    </script>
</body>
</html>

Any ideas?

Upvotes: 1

Views: 2072

Answers (1)

Lukasz Wiktor
Lukasz Wiktor

Reputation: 20422

In Vue 2.x vm.$set is an alias for Vue.set and it takes 3 parameters: target, key and value so you should use it like this:

vm.$set(this, 'options', newOptions);

Or you can just assign newOptions to this.options

this.options = newOptions;

Working example: https://plnkr.co/edit/lFDm7wxb56h81EAwuUNc

Upvotes: 1

Related Questions