VueJs Endless loop with computed variable using in v-select

Question

I'm try to use a computed value in a v-select (from vuetify) and when I select a value in the select there is an endless loop.

I've reproduce my dirty code in this pen to illustrate my problem. Be careful this might block your navigator.

HTML code

<div id="app">
  <v-app id="inspire">
    <v-card color="grey lighten-4" flat>
      <v-card-text>
        <v-select
          v-model="select"
          label="Be careful when select a value :)"
          chips
          tags
          :items="items">
        </v-select>
      </v-card-text>
    </v-card>
  </v-app>
</div>

JS Code

new Vue({
  el: '#app',
  data () {
    return {
      obj: {
        values: [{'name':'Testing'}]
      },
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  },
  computed: {
    select: {
      get: function () {
        return this.obj.values.map(val => val.name).sort()
      },
      set: function (chipsValues) {
        this.obj.values = chipsValues.map(val => {return {'name': val}})
      }
    }
  }
})

What's the proper way to code this behavior ?

Nisarg Shah · Accepted Answer · 2017-10-23 13:30:44Z

2

A quick fix would be to validate before setting the this.obj.values whether you are getting any new values. If the new value is larger/smaller than old value, you can set it, else ignore it.

Since Javascript is synchronous, you can get away with just checking the length of the arrays.

set: function (chipsValues) {
    if( this.obj.values.length != chipsValues.length) {
        this.obj.values = chipsValues.map(val => {return {'name': val}})
    }
}

Here's the updated pen: https://codepen.io/anon/pen/XewjdJ?editors=1010

answered Oct 23, 2017 at 13:30

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

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

2 Comments

tyzef Over a year ago

OK it's works fine. Thank you very much. Can you explain why it do a SET more than once ?

Nisarg Shah Over a year ago

@tyzef It's probably the way v-select is implemented. I would guess that setting a new value would still trigger a getter call to render the chips. IMO select might be better as an array in this.data, while obj.values should be a computed.

Collectives™ on Stack Overflow

VueJs Endless loop with computed variable using in v-select

HTML code

JS Code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML code

JS Code

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related