是否可以在 VUE 中检查无线电而不污染数据？答案

【问题标题】：Is it possible to to have checked radio without defiled data in VUE?是否可以在 VUE 中检查无线电而不污染数据？
【发布时间】：2018-07-06 21:17:22
【问题描述】：

我正在使用 Vue 的列表渲染创建单选按钮，我希望有一个预选值，但脚本中没有数据集。

请参阅下面的代码以更好地了解我想要实现的目标：

脚本：

data() {
   return {
       formData: {} //formData is empty by default, properties added on fly
   }
}

模板：

<div class="switch-button-container two-items">
    <label class="switch-btn" v-for="o in data.formsData.departments"> <-- Data from json
        <input type="radio"
               v-model="formData.Department" <-- property and value added on fly
               name="departments"
               :value="o.value"
               :checked="formData.Department === 'Rent'"> 
        <span class="custom-radio">{{o.value}}</span>
    </label>
</div>

有没有办法通过 JavaScript 实现这一点？

【问题讨论】：

“脚本中没有数据集”我不确定这是什么意思
@Goose 我可能有 'formData:{ Department: 'IT' } 而不仅仅是 'formData:{}'
改用<label class="switch-btn" v-if="data.formsData.departments" v-for="o in data.formsData.departments">，否则会遇到模板编译错误。
@Sphinx 数据加载较早，因此没有错误。无论如何，感谢您的评论。

标签： javascript html vue.js

【解决方案1】：

您可以将初始状态设置为租金，如下所示：

data (
    return {
        formData : {
            Department: "rent"
        }
    }
)

然后当你迭代更改为：

:checked="o.value === formData.Department"

【讨论】：