单选按钮显示为当前值答案

【问题标题】：Radio Button Display as current Value单选按钮显示为当前值
【发布时间】：2021-05-22 20:34:36
【问题描述】：

我有一个单选按钮，用作公司记录的状态选择器。问题是编辑记录时。我想根据当前记录状态预选editdialog中的单选按钮。

当前代码

<v-radio-group v-model="company.status" row mandatory>
   <v-radio label="Active" color="red" value="Active" />
   <v-radio label="Inactive" color="red" value="Inactive" />
</v-radio-group>

我已经尝试了link 中的解决方案，但它仍然无法按预期工作。

<v-radio-group label="Status:" v-model="radioadd" row mandatory>
   <v-radio label="Active" color="red" :value="Active" key="0" />
   <v-radio label="Inactive" color="red" :value="Inactive" key="1" />
</v-radio-group>

这次它警告我没有定义活动和非活动属性或方法。

请指教

ps。我对编码和 vue 很陌生（2 周）

更新已解决

       <v-radio-group v-model="company.status" row>
          <v-radio label="Active" color="red" :value="'Active'"/>
          <v-radio label="Inactive" color="red" :value="'Inactive'"/>
       </v-radio-group>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

你的第二个例子大部分是正确的。但是，:value 绑定需要一个表达式，在这种情况下，绑定确实无法在模型上找到名为 Active 或 Inactive 的变量/属性。相反，您可以将值绑定用引号括起来（因为 JavaScript 中的 'Active' 是一个计算为字符串文字的表达式）：

<v-radio label="Active" color="red" :value="'Active'" key="0" />

注意 Active 周围的引号。

或者，您可以使用literal 修饰符，它告诉值绑定将给定值解释为文字而不是表达式：

<v-radio label="Active" color="red" :value.literal="Active" key="0" />

无论您选择哪种方法，都将相同的方法应用于 Inactive 单选按钮元素。

【讨论】：

谢谢！这种方法是可行的。但是我是否添加了一个关键道具。它仍然有效所以我很好奇“关键”道具的含义是什么。无论如何谢谢你。
key 属性是唯一标识符，最常用于v-for。你可以在这里阅读更多：v3.vuejs.org/guide/migration/key-attribute.html

【解决方案2】：

您无需使用value 进行任何更改。您已经拥有的标记是正确的（即，value="Active" 是正确的，并且在选择此收音机时使收音机组的值等于 "Active"）。

要将无线电组初始化为company.status 的当前值，该属性需要等于无线电组中的值之一（即"Active" 或"Inactive"）。

export default {
  data() {
    return {
      company: {
        status: 'Inactive' // initial value of radio group
      }
    }
  }
}

demo

【讨论】：