单选按钮显示为当前值

Question

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

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

请多多指教

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>

Answer 1

你的第二个例子大部分是正确的。但是，:value 绑定需要一个表达式，在这种情况下，绑定确实无法在模型上找到名为 Active 或 Inactive 的 variable/property。相反，您可以将值绑定用引号引起来（因为 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" />

无论您选择哪种方法，都应将其应用于非活动单选按钮元素。

Answer 2

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

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

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

demo

单选按钮显示为当前值

Radio Button Display as current Value

javascript

vue.js

vuetify.js