创建方法后，Vue不更新​​DOM中的select

Question

我有这个roles数组，在created方法中，我进行了一次调用以从api调用中分派并获取角色，因此我想它应该随创建的函数一起加载。

现在，我在分发getRoles后使用console.log来打印角色，它已经打印但在DOM中不会更新。

如果您注意到此部分，在表单和下拉列表之后我仅在组件内部显示{{roles}}，则在对组件进行细微更改并保存后，此部分并选择更新，然后在热重新加载后显示数据，但不显示第一次与created

问题是，数据是在首次加载时获取并打印的，但Roles数组未在DOM中更新。

<template>
  <div class="container">
    <form class="card offset-3 col-6 text-center border border-light p-5">
      <div class="form-group">
        <label for="formGroupExampleInput">Roles</label>
      </div>

      <select class="browser-default custom-select">
        <option selected>Choose a role to assign permissions</option>
        <option v-for="role in roles" key="role.display_name" value="1"> {{role.name}} </option>
      </select>

    </form>
    roles :{{ roles }}
  </div>
</template>

<script>
export default {
  data: {
    return: {
      roles: [] 
    }
  },
  created() {
      this.$store
        .dispatch('getRoles')
        .then(() => {
          this.roles = this.$store.getters.getRoles
          console.log('roles', this.roles)
        })
        .catch(() =>  { 
          console.log('roles request failed')
        })
  }
}
</script>

Answer 1

问题在于返回数据，所以我将其替换为

data: () => ({
      roleName: '',
      roles: [] 
    })

现在工作正常