javascript - How to make <v-switch> have default value of "false"

Currently I want to make a testimony page using switch to make the testimony appear or active but I have a problem to set the <v-switch> to have a default value false, Whenever I try to fetch it, It always return a default value true even though I already set it to false,

I already try to read this but it still can't solve my problem:

My Vuetify Switch not change his value?

Vue/vuetify v-switch: what is input-value?

This is my siwtch code:

<template slot="items" slot-scope="props">
  <td>{{ props.item.uuid }}</td>
  <td>{{ props.item.name }}</td>
  <td>{{ props.item.phone }}/5.0</td>
  <td>{{ props.item.jobTitle }}</td>
  <td>
    <div slot="widget-content">
      <div class="basic">
        <v-switch :label="props.item.status ? 'Active': 'Non-Active'" v-model="props.item.status" color="success" @change="getStatus(props.item.status)"></v-switch>
      </div>
    </div>
  </td>
</template>

This is my method:

getStatus(status){
  this.status = status;
  console.log("Test Data Status : ", this.status)
}

and this is my sample data :

const Items =  [
  {
    'uuid': '65a6eb21-67b5-45c3-9af7-faca2d9b60d4',
    'name': 'Dessie',
    'email': '[email protected]',
    'username': 'Dessie79',
    'jobTitle': 'Web Developer',
    'phone': '1-360-812-9380 x511',
    'avatar': '/static/avatar/a2.jpg',
    'status': 'false',
    'address': {
      'street': '655 Archibald Groves',
      'suite': 'Apt. 818',
      'city': 'Carlosshire',
      'state': 'Arkansas',
      'country': 'Somalia',
      'zipcode': '10406',
      'geo': {
        'lat': '-44.6063',
        'lng': '-169.7706'
      }
    },
  },
  {
    'uuid': '28d9f265-74d7-4f85-83d4-6a21fca57dcf',
    'name': 'Jakayla',
    'jobTitle': 'Web Designer',
    'email': '[email protected]',
    'username': 'Jakayla_Crooks86',
    'phone': '610.499.1240',
    'avatar': '/static/avatar/a3.jpg',
    'status': 'false',
    'address': {
      'street': '281 Tillman Forge',
      'suite': 'Apt. 381',
      'city': 'New Sandrinemouth',
      'state': 'North Dakota',
      'country': 'Reunion',
      'zipcode': '19540-8186',
      'geo': {
        'lat': '-12.3375',
        'lng': '-117.9067'
      }
    }
  },
  {
    'uuid': '14ddae1e-986d-42f4-8d17-46a02d469b2b',
    'name': 'Hobart',
    'jobTitle': 'Sales',
    'email': '[email protected]',
    'username': 'Hobart_Mueller',
    'phone': '1-590-385-3349',
    'avatar': 'static/avatar/a1.jpg',
    'status': 'false',
    'address': {
      'street': '706 Padberg Knoll',
      'suite': 'Suite 818',
      'city': 'Port Mablefurt',
      'state': 'Arkansas',
      'country': 'Netherlands Antilles',
      'zipcode': '89975-6584',
      'geo': {
        'lat': '-42.9187',
        'lng': '8.5866'
      }
    }
  },
  {
    'uuid': '6a03248b-1752-4332-a3a9-7108528cc9d3',
    'name': 'Celestine',
    'jobTitle': 'Marketing',
    'email': '[email protected]',
    'username': 'Celestine.Casper',
    'phone': '1-830-046-3289',
    'avatar': '/static/avatar/a4.jpg',
    'status': 'false',
    'address': {
      'street': '9528 Schroeder Track',
      'suite': 'Apt. 443',
      'city': 'Godfreyburgh',
      'state': 'Montana',
      'country': 'Slovenia',
      'zipcode': '10220',
      'geo': {
        'lat': '36.8638',
        'lng': '20.0047'
      }
    }
  },
];

this is what i get right now :

what i got

What i want to achieved

I already try using:

<div slot="widget-content">
  <div class="basic">
    <v-switch value="true" :label="props.item.status ? 'Active': 'Non-Active'" v-model="props.item.status" color="success" @change="getStatus(props.item.status)"></v-switch>
  </div>
</div>

But when I try to click it 2 times It always return null instead of false

Can someone help me to solve this?

I already try to read this but it still can't solve my problem:

My Vuetify Switch not change his value?

Vue/vuetify v-switch: what is input-value?

This is my siwtch code:

<template slot="items" slot-scope="props">
  <td>{{ props.item.uuid }}</td>
  <td>{{ props.item.name }}</td>
  <td>{{ props.item.phone }}/5.0</td>
  <td>{{ props.item.jobTitle }}</td>
  <td>
    <div slot="widget-content">
      <div class="basic">
        <v-switch :label="props.item.status ? 'Active': 'Non-Active'" v-model="props.item.status" color="success" @change="getStatus(props.item.status)"></v-switch>
      </div>
    </div>
  </td>
</template>

This is my method:

getStatus(status){
  this.status = status;
  console.log("Test Data Status : ", this.status)
}

and this is my sample data :

const Items =  [
  {
    'uuid': '65a6eb21-67b5-45c3-9af7-faca2d9b60d4',
    'name': 'Dessie',
    'email': '[email protected]',
    'username': 'Dessie79',
    'jobTitle': 'Web Developer',
    'phone': '1-360-812-9380 x511',
    'avatar': '/static/avatar/a2.jpg',
    'status': 'false',
    'address': {
      'street': '655 Archibald Groves',
      'suite': 'Apt. 818',
      'city': 'Carlosshire',
      'state': 'Arkansas',
      'country': 'Somalia',
      'zipcode': '10406',
      'geo': {
        'lat': '-44.6063',
        'lng': '-169.7706'
      }
    },
  },
  {
    'uuid': '28d9f265-74d7-4f85-83d4-6a21fca57dcf',
    'name': 'Jakayla',
    'jobTitle': 'Web Designer',
    'email': '[email protected]',
    'username': 'Jakayla_Crooks86',
    'phone': '610.499.1240',
    'avatar': '/static/avatar/a3.jpg',
    'status': 'false',
    'address': {
      'street': '281 Tillman Forge',
      'suite': 'Apt. 381',
      'city': 'New Sandrinemouth',
      'state': 'North Dakota',
      'country': 'Reunion',
      'zipcode': '19540-8186',
      'geo': {
        'lat': '-12.3375',
        'lng': '-117.9067'
      }
    }
  },
  {
    'uuid': '14ddae1e-986d-42f4-8d17-46a02d469b2b',
    'name': 'Hobart',
    'jobTitle': 'Sales',
    'email': '[email protected]',
    'username': 'Hobart_Mueller',
    'phone': '1-590-385-3349',
    'avatar': 'static/avatar/a1.jpg',
    'status': 'false',
    'address': {
      'street': '706 Padberg Knoll',
      'suite': 'Suite 818',
      'city': 'Port Mablefurt',
      'state': 'Arkansas',
      'country': 'Netherlands Antilles',
      'zipcode': '89975-6584',
      'geo': {
        'lat': '-42.9187',
        'lng': '8.5866'
      }
    }
  },
  {
    'uuid': '6a03248b-1752-4332-a3a9-7108528cc9d3',
    'name': 'Celestine',
    'jobTitle': 'Marketing',
    'email': '[email protected]',
    'username': 'Celestine.Casper',
    'phone': '1-830-046-3289',
    'avatar': '/static/avatar/a4.jpg',
    'status': 'false',
    'address': {
      'street': '9528 Schroeder Track',
      'suite': 'Apt. 443',
      'city': 'Godfreyburgh',
      'state': 'Montana',
      'country': 'Slovenia',
      'zipcode': '10220',
      'geo': {
        'lat': '36.8638',
        'lng': '20.0047'
      }
    }
  },
];

this is what i get right now :

what i got

What i want to achieved

I already try using:

<div slot="widget-content">
  <div class="basic">
    <v-switch value="true" :label="props.item.status ? 'Active': 'Non-Active'" v-model="props.item.status" color="success" @change="getStatus(props.item.status)"></v-switch>
  </div>
</div>

But when I try to click it 2 times It always return null instead of false

Can someone help me to solve this?

Share Improve this question edited Mar 7, 2019 at 6:48 fiza khan 1,29614 silver badges24 bronze badges asked Mar 7, 2019 at 5:49 Rakis Friski 5711 gold badge11 silver badges26 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Your data has status as a string not a boolean. Give that a go.

Just to plete the answer, you can set a default true and false value to a v-switch like that :

<v-switch
  false-value="I'm false"
  true-value="I'm true"
></v-switch>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make <v-switch> have default value of "false" - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)