Почему ref не реактивно в html теге?

Question

[Артем Прохоров]

<div class="form-check" v-for="user in users" :key="user.id">
      <select class="form-select form-select-sm" :ref="user.username">
        <option selected>Выберите роль</option>
        <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.title }}</option>
      </select>

      <input v-if="$refs[user.username]" class="form-check-input" type="checkbox"
             :value="[user.id, $refs[user.username][0].value]" v-model="users_id">
      <label class="form-check-label">{{ user.username }}</label>
    </div>

И в value чекбокса 2 параметром массива должно быть значения селекта выше. То есть если я изменил значение селекта, то я хочу чтобы и value 2 элемента массива менялось, но оно всегда выводит лишь значение selected option, даже если я выбрал новый элемент выпадающего списка.

А если я хочу вызвать значение селекта из this.$refs в методе компонента, то так есть реактивность.

Comments

[Alex]

Нихрена не понятно из вопроса ... Дайте ссылку на демку в песочнице

[Aetae]

Очевидно что вместо :ref надо юзать v-model. В Vue ты работаешь с данными, а не с DOM. ref - последнее средство.

Answer 1

[Алексей Ярков]

Почему ref не реактивно в html теге?

По качану ))
https://ru.vuejs.org/v2/api/#ref

Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.