如何按值查找单选按钮以使用另一个元素检查它 - VueJS答案

【问题标题】：How do I find a radio button by value to check it with another element - VueJS如何按值查找单选按钮以使用另一个元素检查它 - VueJS
【发布时间】：2020-06-11 14:56:00
【问题描述】：

对于标题有点难以理解，我深表歉意。我很难用一行来解释它。但这就是我想要做的。

我正在我的应用中开发一个支持条形码枪阅读器的屏幕。条码枪只能与文本字段交互。然后通过一个文本字段（隐藏），我可以传递一个自定义条形码，指示 UI 做某事。为了清楚起见，这里是 UI 解释：

我有一个带有 2 个选项（是和否）的单选按钮组
我有一个隐藏的文本字段来接受条形码枪读取
我有一个条形码表示“是”，另一个条形码表示“否”
如果我扫描“是”条码，应选中值为“是”的单选按钮选项
如果我扫描“否”条码，应选中值为“否”的单选按钮选项

我最初以为通过将v-model更改为正确的值，它会做到这一点，但它没有检查它。同样，通过将 v-model.value 更改为 true 或 false，它将检查到其适当的值。但是没有雪茄。

我的想法是（伪代码）

如果 querySelector 名称为 ragrouphidden.value = "Yes"，则查找值为 Yes 且 option.checked = true 的选项
否则，如果 querySelector 名称为 ragrouphidden.value = "No"，则查找值为 No 且 option.checked = true 的选项

“查找”部分是我无法理解的，或者也许有更简单的方法。

这是一些相关的代码

模板

<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 
        }
    },
}

希望这对你们有意义。提前致谢。

【问题讨论】：

我认为模型值应该设置为this.ragroup = true; 而不是this.ragroup.value = true; 你试过一次吗？
好点。让我试试。 BRB
哦，大声哭泣！大声笑...就这么简单！哈哈。谢啦。把答案写进去。我会给你功劳

标签： javascript vue.js vuejs2

【解决方案1】：

此处无需使用ragroup.value 设置模型值。你可以简单地做this.ragroup = true;，vue 会在后台自动为你设置q-option-group 选择的值。

一个带有动态复选框的简单演示：

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>

【讨论】：