Vue. js установить выбранное значение для опции с условно не работает

Question

Я пытаюсь установить выбранное значение для параметра объекта внутри выбора, если этот идентификатор соответствует другому объекту. У меня есть массив объектов Секторов Компании, которые поступают из API, и компании, у которой есть сектор, поступающий из другого вызова API. Таким образом, если поле sector_id, полученное из вызова API Компании, совпадает с идентификатором Массива секторов, поступающих из другого API, то у этого элемента должна быть выбрана опция «check». По какой-то причине мой способ не работает. Кто-то знает почему?

Это мой код:

<select v-model="company.descripion" name="role">
                        <option v-for="company_sector in this.company_sectors" :key="company_sector.id" :company_sector.id="company_sector" 
                        v-bind:select="company_sector.id == company.sector_id">
                            {{company_sector.name}}
                        </option>
                </select> 

Это, например, часть того, что происходит из API компании. Никаких проблем с этим, возвращаемый Json работает нормально:

 "company": {
    "id": 8,
    "sector_id": 19,
    "sector": {
      "id": 19,
      "name": "Consultancy/ Services"
    },

, и это часть того, что исходит из API company_sectors, также прекрасно работает

[
  {
    "id": 19,
    "name": "Consulting"
  },
...then many other elements...
]

Вместо отображения имя Консалтинга в качестве опции, выбранной в списке, первый элемент списка company_sectors, если отображается как выбранный, по умолчанию.

Любые идеи включены. что происходит?

Answer 1

1) Для выбора опции программно используйте v-model для select элемента.

2) Установите атрибут value каждой опции на company_sector.id. Таким образом, вы получите id выбранной опции в вашей переменной v-model, и вы сможете выбрать опцию программно с помощью id.

Фрагмент рабочего кода приведен ниже:

var vm = new Vue({
  el: '#app',
  data: {
    selected: null,
    company: {
      id: 8,
      sector_id: 19,
      sector: {
        id: 19,
        name: "Consultancy/ Services"
      }
    },
    company_sectors: [
      {
        id: 19,
        name: "Consulting 19"
      },
      {
        id: 20,
        name: "Consulting 20"
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <select v-model="selected" name="role">
    <option v-for="company_sector in company_sectors" :key="company_sector.id" :value="company_sector.id">
    {{company_sector.name}}
  </option>
 </select> 
 <button @click="selected = company.sector_id">Set value</button>
</div>