VueJs Список выбора элементов с mapGetter не работает

Question

Я пытаюсь реализовать список el-select, используя данные из mapGetter. В основном значения отображаются, но я не могу их выбрать. Когда я нажимаю на опцию, она не выбирается. Вот код

        <el-select v-model="value" placeholder="unassigned">
          <el-option
            v-for="item in getTeamMembers"
            :label="item.data.attributes.value"
            :value="item.id">
          </el-option>
        </el-select>

Как мне действовать дальше?

Answer 1

Я думаю, что el-select не наблюдает за изменениями, чтобы он смотрел, вы должны назначить переменную в вашем объекте данных или состоянии вот демонстрация в codepen

Вот код :

<div id="app">
<template>
      <el-select 
            v-model="someVal" 
            placeholder="something"     
        >
        <el-option
            v-for="(item,index) in getTeamMembers"
            :key="index"
            :label="item.data.attributes.value"
            :value="item.id">
     </el-option>
  </el-select>
</template>
</div>

и объект данных должен быть:

    data() {
      return {
        getTeamMembers: [
            {id: 1, data: { attributes: { value: 'vue'}}}, 
            {id: 2, data: { attributes: { value: 'laravel'}}}, 
            {id: 3, data: { attributes: { value: 'nodejs'}}}
        ],
        someVal: undefined
      }
    }