时间戳

首页 > 解决方案 > 单选按钮显示为当前值

javascript - 单选按钮显示为当前值

问题描述

我有一个单选按钮，用作公司记录的状态选择器。问题是编辑记录时。我想根据当前记录状态预选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>

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

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

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

请给个建议

附言。我对编码和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>

标签： javascriptvue.jsvuetify.js

解决方案

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

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

请注意 Active 周围的引号。

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

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

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

推荐阅读