Question

当前，我想使用开关制作一个见证页面，以使见证出现或处于活动状态，但是我在将<v-switch>设置为默认值false时遇到问题，无论何时尝试获取它，即使我已经将其默认设置为true，它也会始终返回默认值false

我已经尝试阅读此书，但仍然无法解决我的问题：

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

这是我的siwtch代码：

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

这是我的方法：

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

这是我的示例数据：

const Items =  [
  {
    'uuid': '65a6eb21-67b5-45c3-9af7-faca2d9b60d4',
    'name': 'Dessie',
    'email': 'Dessie7937@gmail.com',
    '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': 'Jakayla_Crooks867@yahoo.com',
    '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': 'Hobart_Mueller.Thiel@hotmail.com',
    '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': 'Celestine.Casper59@hotmail.com',
    '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'
      }
    }
  },
];

这就是我现在得到的：

what i got

What i want to achieved

我已经尝试使用：

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

但是当我尝试单击两次时，它总是返回null而不是false

有人可以帮我解决这个问题吗？

Answer 1

您的数据的状态为字符串而不是布尔值。放手去吧。

如何使<v-switch>的默认值为“ false”

1 个答案: