Question

我有一个要循环获取4个开关的数组，我有一个禁用的文本字段，我想在启用一个开关时启用它，当然，当我关闭开关时，该字段应该禁用。我该如何实现？

下面是我正在使用的模板和脚本。

 <div class="body-2">Hello There:</div>
      <div class="caption">This is Some Text</div>
      <v-switch :v-model="`${project.model}`" v-for="project in projects" 
      :key="project.status" 
      :label="`${project.status}`"></v-switch>
      <v-text-field :disabled="!enabled" label="This is My Label"</v-text-field>




export default{
    data(){
    return{
    enabled:false,
    projects:
    [ {status:"Text1", model:"enabled1"},
    {status:"Text2",model:"enabled2"},
    {status:"Text3",model:"enabled3"},
    {status:"Text4",model:"enabled4"}
       ]

Answer 1

我不熟悉vuetify，但是如果您可以简单地将每个项目对象的.model属性用作开关v-model，则可以使.enabled成为计算属性，而不是数据属性：

computed: {
    enabled() {
        return this.projects.some(project => project.model);
    }
}

Answer 2

我相信您在尝试打开一个开关时启用输入，但是在所有四个开关都关闭时禁用输入。

disabled属性可以绑定到计算属性，如果其中一个开关打开，则返回false，如果所有四个开关都关闭，则返回true。

如果这是一个自定义组件，则另一个选择是从子组件（v-switch）发出一个自定义事件，该事件将发出开关是打开还是关闭的信息，然后调用一个方法，该方法设置绑定到的布尔值：禁用。

如何在激活开关时启用“文本”字段？

2 个答案: