Двухстороннее связывание данных с использованием семантического пользовательского интерфейса с возможностью поиска с помощью vuejs

Question

У меня проблема с выпадающим списком Semantic-UI и привязкой данных Vuejs, в настоящее время он может смоделировать только измененную опцию привязки 1 независимо от выбранной опции выпадающего меню. ниже мой код.

Я пытался использовать событие @change, но это не принесло мне результатов.

           <select
              name="clients"
              id="clients"
              class="ui fluid search selection dropdown uppercase"
              v-model="selected_client"
            >
              <option value>Select Client</option>
              <option
                v-for="(client, index) in clients"
                :key="index"
                :value="client.services"
              >{{client.firstname}}, {{client.lastname}}</option>
            </select>

Answer 1

Я понял свою ошибку, дело было не в обработчике события @change, а в том, как я обрабатывал ключ v-bind, так как v-bind ожидал, что каждый ключ будет уникальным, поэтому в моем случае я не предоставлял такого, поэтомупередал событие методу, который отфильтровывает конкретного клиента на основе идентификатора, указанного в качестве значения.ниже приведено решение, которое сработало для меня.

Я надеюсь, что кто-то найдет это полезным.

       <select
          name="clients"
          id="clients"
          class="ui fluid search selection dropdown uppercase"
          @change="clientData($event)"
        >
          <option value>Select Client</option>
          <option
            v-for="client in clients"
            :key="client.id"
            :value="client.id"
          >{{client.firstname}}, {{client.lastname}}</option>
        </select>