How do i enable Text field on activating the switch?

Question

I have an array on which i am looping to get 4 switches, i have a text field that is disabled and i want to enable it when i enable one of the switch and ofcourse the field should disable when i turn off the switch. How do i achieve it?

Below is my Template and my Script that i am using.

 <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"}
       ]

Stephen Thomas Stephen Thomas · Accepted Answer · 2019-01-11T21:03:12

I'm not familiar with vuetify, but if you could simply use the .model property of each project object as the switch v-model, you could make .enabled a computed property instead of a data property:

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

How do i enable Text field on activating the switch?

2 Answers