Question

我从一系列选项中填充了一些单选按钮。我想确定使用$ refs选择哪个单选按钮，但是当我注销$ refs时，它会显示所有单选按钮。

是否可以使用$ refs来抓住选择单选按钮？可以将event.target与$ refs或其他东西结合起来吗？此外，我如何访问该引用的某些部分，例如所选元素的类。我正在尝试仅使用vue来执行此操作，但是事实证明很困难。

感谢您提供的任何帮助。

<li
          class="mc-option"
          v-for="(option, i) in options"
          :key="i">

<input
        ref="mcOption"
        type="radio"
        name="option"
        :id="'option-' + i"
        class=""
        @click="radioSelected($event)">

</li>

methods: {
  radioSelected: function () {
      let mcOption = this.$refs.mcOption
      console.log(mcOption)
    },)
}

Answer 1

X是您的ID：

<ul>
    <li v-for="x in 5">
        <label :for="`radio${x}`">radio{{x}}</label>
        <input type="radio" name="radio" :id="`radio${x}`" @change="getRef(`radio${x}`)" :ref="`radio${x}`">
    </li>
</ul>

methods: {
getRef (ref) {
  console.log(this.$refs[ref])
}}

Answer 2

之所以会这样，是因为所有生成的选项都具有相同的ref ID。您可以使用以下代码来解决这个问题。

模板

<li class="mc-option" v-for="(option, i) in options" :key="i">
            <input :ref="['mcOption',i].join('-')" type="radio" name="option" :id="'option-' + i" class="" @click="radioSelected(i)"> {{i+1}}
</li>

JS

methods: {
            radioSelected: function (i) {
                let mcOption = this.$refs[['mcOption', i].join('-')]
                console.log(mcOption)
            }
        }

要注意的点是：

:ref
使用['mcOption', i].join('-')的变量ref id。实际上，这可以是您想要的任何东西（但应在每次v-for迭代中更改）。

请告诉我它是否不适合您。

Answer 3

我将整个返回的$ refs数组进行遍历，然后可以注销每个项目作为选项。

mcOption.forEach((option) => {
        if (option.checked === true) {
          console.log(option)
            //Can also now add or remove classes by
            // This will add the .mc-checked class to an radio button that has been selected     
            option.classList.add('.mc-checked')
        }
      })

使用vue，通过访问$ refs确定选择哪个无线电输入

3 个答案: