Как найти переключатель по значению, чтобы проверить его с другим элементом - VueJS

Question

Прошу прощения за то, что название немного сложное для понимания. Мне было трудно объяснить это в одной строке. Но вот что я пытаюсь сделать.

Я разрабатываю экран в своем приложении, который поддерживает устройство считывания штрих-кода. Оружие со штрих-кодом может взаимодействовать только с текстовыми полями. И затем через текстовое поле (скрытое) я могу передать собственный штрих-код, который инструктирует пользовательский интерфейс, чтобы сделать что-то. Вот пояснение пользовательского интерфейса для ясности:

1. У меня есть группа переключателей с 2 ​​вариантами (да и нет)
2. У меня есть скрытое текстовое поле, чтобы принять считывание штрихкода
3. У меня есть штрих-код для «да», а другой для «нет»
4. Если я сканирую штрих-код «да», необходимо установить переключатель со значением = «Да»,
5. Если я сканирую штрих-код «нет», необходимо установить флажок «Значение» = «Нет».

Сначала я подумал, что, изменив v-модель на правильное значение, он это сделает, но не проверил. Аналогично, изменяя значение v-model.value на true или false, оно проверяет его на соответствующее значение. Но без сигары.

Моя идея о том, как это будет работать, заключается в следующем (псевдокод)

1. , если querySelector с именем ragrouphidden.value = "Да", тогда найдите вариант со значением Да и option.checked = true
2. иначе, если querySelector с именем ragrouphidden.value = "No", найдите параметр со значением No и option.checked = true

Поиск "find" "часть - это то, что ускользает от меня, или, может быть, есть более простой способ.

Вот некоторый соответствующий код

Шаблон

<div>
    <q-input
        class="hidden-field"
        v-model="ragrouphidden"
        name="ragrouphidden"
        @change="raSelectOption()">
    </q-input>
    <div>
        <label class="col-6 text-weight-medium">Mark for Remote Adjudication</label>
        <div>
            <q-option-group
                v-model="ragroup"
                :options="raoptions"
                @check="raRules($event.target.value)"/>
        </div>
    </div>
</div>

Сценарий

data() {
    return {
        ragrouphidden: "",
        ragroup: null,
        raoptions: [
            {
                label: "Yes",
                value: true
            },
            {
                label: "No",
                value: false
            }
        ],

    }
},
methods: {
   raSelectOption() {
        setTimeout(() => {
            let hasFocus = document.querySelector("input[name=ragrouphidden]");
            hasFocus.focus();
        }, 500);

        if (
            document.querySelector("input[name=ragrouphidden]").value === "*yes*"
        ) {
            this.ragroup.value = true;  //this is what I need
        } else if (
            document.querySelector("input[name=ragrouphidden]").value === "*no*"
        ) {
            this.ragroup.value = false; //This as well 
        }
    },
}

Надеюсь, это имеет смысл для вас, ребята. Заранее спасибо.

Answer 1

Вам не нужно использовать ragroup.value для установки значения модели здесь. Вы можете просто сделать this.ragroup = true;, и vue автоматически установит q-option-group выбранное значение для вас за сценой.

Простая демонстрация с Dynami c, флажок:

var demo = new Vue({
  el: '#demo',
  data: {
    checked: [],
    categories: [{ Id: 1 }, { Id: 2 }]
  },
  mounted(){ this.checked = [2] }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="demo">
  <ul>
    <li v-for="c in categories">
      <input type="checkbox" :value="c.Id" :id="c.Id" v-model="checked" />
        {{c.Id}}
    </li>
  </ul>
</div>