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

我尝试在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}})
      }
    }
  }
})

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

最佳答案

一个快速的解决方法是在设置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

关于javascript - VueJs在v-select中使用计算变量的无穷循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46890297/