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

Question

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

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

HTML 代码

<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