VueJs在v-select中使用计算变量的无限循环

Question

我尝试在v-select（来自vuetify）中使用计算值，当我在select中选择一个值时，会有一个无限循环。

我重现my dirty code in this pen来说明我的问题。小心这可能会阻止您的导航器。

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代码

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

编码此行为的正确方法是什么？

Answer 1

快速解决方法是在设置this.obj.values之前验证是否获得任何新值。如果新值大于/小于旧值，则可以设置它，否则忽略它。

由于Javascript是同步的，因此只需检查数组的长度即可。

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

这是更新过的笔：https://codepen.io/anon/pen/XewjdJ?editors=1010