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

10-13 07:17