@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/persistentvolume/plugins/photonPersistentDisk.vue

@@ -25,9 +25,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'photonPersistentDisk', this.value.spec.photonPersistentDisk || {});
-    this.$set(this.value.spec.photonPersistentDisk, 'readOnly', this.value.spec.photonPersistentDisk.readOnly || false);
-    this.$set(this.value.spec.photonPersistentDisk, 'secretRef', this.value.spec.photonPersistentDisk.secretRef || {});
+    this.value.spec['photonPersistentDisk'] = this.value.spec.photonPersistentDisk || {};
+    this.value.spec.photonPersistentDisk['readOnly'] = this.value.spec.photonPersistentDisk.readOnly || false;
+    this.value.spec.photonPersistentDisk['secretRef'] = this.value.spec.photonPersistentDisk.secretRef || {};
 
     return { readOnlyOptions };
   },
@@ -39,7 +39,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.photonPersistentDisk.pdID"
+          v-model:value="value.spec.photonPersistentDisk.pdID"
           :mode="mode"
           :label="t('persistentVolume.photonPersistentDisk.pdId.label')"
           :placeholder="t('persistentVolume.photonPersistentDisk.pdId.placeholder')"
@@ -47,7 +47,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.photonPersistentDisk.fsType"
+          v-model:value="value.spec.photonPersistentDisk.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"

package/edit/persistentvolume/plugins/portworxVolume.vue

@@ -26,9 +26,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'portworxVolume', this.value.spec.portworxVolume || {});
-    this.$set(this.value.spec.portworxVolume, 'readOnly', this.value.spec.portworxVolume.readOnly || false);
-    this.$set(this.value.spec.portworxVolume, 'secretRef', this.value.spec.portworxVolume.secretRef || {});
+    this.value.spec['portworxVolume'] = this.value.spec.portworxVolume || {};
+    this.value.spec.portworxVolume['readOnly'] = this.value.spec.portworxVolume.readOnly || false;
+    this.value.spec.portworxVolume['secretRef'] = this.value.spec.portworxVolume.secretRef || {};
 
     return { readOnlyOptions };
   },
@@ -40,7 +40,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.portworxVolume.volumeID"
+          v-model:value="value.spec.portworxVolume.volumeID"
           :mode="mode"
           :label="t('persistentVolume.portworxVolume.volumeId.label')"
           :placeholder="t('persistentVolume.portworxVolume.volumeId.placeholder')"
@@ -48,7 +48,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.portworxVolume.fsType"
+          v-model:value="value.spec.portworxVolume.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -58,7 +58,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.portworxVolume.readOnly"
+          v-model:value="value.spec.portworxVolume.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/quobyte.vue

@@ -26,8 +26,8 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'quobyte', this.value.spec.quobyte || {});
-    this.$set(this.value.spec.quobyte, 'readOnly', this.value.spec.quobyte.readOnly || false);
+    this.value.spec['quobyte'] = this.value.spec.quobyte || {};
+    this.value.spec.quobyte['readOnly'] = this.value.spec.quobyte.readOnly || false;
 
     return { readOnlyOptions };
   },
@@ -39,7 +39,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.quobyte.volume"
+          v-model:value="value.spec.quobyte.volume"
           :mode="mode"
           :label="t('persistentVolume.quobyte.volume.label')"
           :placeholder="t('persistentVolume.quobyte.volume.placeholder')"
@@ -47,7 +47,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.quobyte.user"
+          v-model:value="value.spec.quobyte.user"
           :mode="mode"
           :label="t('persistentVolume.quobyte.user.label')"
           :placeholder="t('persistentVolume.quobyte.user.placeholder')"
@@ -57,7 +57,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.quobyte.group"
+          v-model:value="value.spec.quobyte.group"
           :mode="mode"
           :label="t('persistentVolume.quobyte.group.label')"
           :placeholder="t('persistentVolume.quobyte.group.placeholder')"
@@ -65,7 +65,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.quobyte.registry"
+          v-model:value="value.spec.quobyte.registry"
           :mode="mode"
           :label="t('persistentVolume.quobyte.registry.label')"
           :placeholder="t('persistentVolume.quobyte.registry.placeholder')"
@@ -75,7 +75,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.quobyte.readOnly"
+          v-model:value="value.spec.quobyte.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/rbd.vue

@@ -29,9 +29,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'rbd', this.value.spec.rbd || {});
-    this.$set(this.value.spec.rbd, 'readOnly', this.value.spec.rbd.readOnly || false);
-    this.$set(this.value.spec.rbd, 'secretRef', this.value.spec.rbd.secretRef || {});
+    this.value.spec['rbd'] = this.value.spec.rbd || {};
+    this.value.spec.rbd['readOnly'] = this.value.spec.rbd.readOnly || false;
+    this.value.spec.rbd['secretRef'] = this.value.spec.rbd.secretRef || {};
 
     return { readOnlyOptions };
   },
@@ -43,7 +43,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.user"
+          v-model:value="value.spec.rbd.user"
           :mode="mode"
           :label="t('persistentVolume.rbd.user.label')"
           :placeholder="t('persistentVolume.rbd.user.placeholder')"
@@ -51,7 +51,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.keyring"
+          v-model:value="value.spec.rbd.keyring"
           :mode="mode"
           :label="t('persistentVolume.rbd.keyRing.label')"
           :placeholder="t('persistentVolume.rbd.keyRing.placeholder')"
@@ -61,7 +61,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.pool"
+          v-model:value="value.spec.rbd.pool"
           :mode="mode"
           :label="t('persistentVolume.rbd.pool.label')"
           :placeholder="t('persistentVolume.rbd.pool.placeholder')"
@@ -69,7 +69,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.image"
+          v-model:value="value.spec.rbd.image"
           :mode="mode"
           :label="t('persistentVolume.rbd.image.label')"
           :placeholder="t('persistentVolume.rbd.image.placeholder')"
@@ -79,7 +79,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.secretRef.name"
+          v-model:value="value.spec.rbd.secretRef.name"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -87,7 +87,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.secretRef.namespace"
+          v-model:value="value.spec.rbd.secretRef.namespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -97,7 +97,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.rbd.fsType"
+          v-model:value="value.spec.rbd.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -105,7 +105,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.rbd.readOnly"
+          v-model:value="value.spec.rbd.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"
@@ -117,7 +117,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <ArrayList
-          v-model="value.spec.rbd.monitors"
+          v-model:value="value.spec.rbd.monitors"
           :add-label="t('persistentVolume.shared.monitors.add')"
           :mode="mode"
         />

package/edit/persistentvolume/plugins/scaleIO.vue

@@ -26,10 +26,10 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'scaleIO', this.value.spec.scaleIO || {});
-    this.$set(this.value.spec.scaleIO, 'readOnly', this.value.spec.scaleIO.readOnly || false);
-    this.$set(this.value.spec.scaleIO, 'secretRef', this.value.spec.scaleIO.secretRef || {});
-    this.$set(this.value.spec.scaleIO, 'sslEnabled', this.value.spec.scaleIO.sslEnabled || false);
+    this.value.spec['scaleIO'] = this.value.spec.scaleIO || {};
+    this.value.spec.scaleIO['readOnly'] = this.value.spec.scaleIO.readOnly || false;
+    this.value.spec.scaleIO['secretRef'] = this.value.spec.scaleIO.secretRef || {};
+    this.value.spec.scaleIO['sslEnabled'] = this.value.spec.scaleIO.sslEnabled || false;
 
     return { yesNoOptions };
   },
@@ -41,7 +41,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.volumeName"
+          v-model:value="value.spec.scaleIO.volumeName"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.volumeName.label')"
           :placeholder="t('persistentVolume.scaleIO.volumeName.placeholder')"
@@ -49,7 +49,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.gateway"
+          v-model:value="value.spec.scaleIO.gateway"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.gateway.label')"
           :placeholder="t('persistentVolume.scaleIO.gateway.placeholder')"
@@ -59,7 +59,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.protectionDomain"
+          v-model:value="value.spec.scaleIO.protectionDomain"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.protectionDomain.label')"
           :placeholder="t('persistentVolume.scaleIO.protectionDomain.placeholder')"
@@ -67,7 +67,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.storageMode"
+          v-model:value="value.spec.scaleIO.storageMode"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.storageMode.label')"
           :placeholder="t('persistentVolume.scaleIO.storageMode.placeholder')"
@@ -77,7 +77,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.storagePool"
+          v-model:value="value.spec.scaleIO.storagePool"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.storagePool.label')"
           :placeholder="t('persistentVolume.scaleIO.storagePool.placeholder')"
@@ -85,7 +85,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.system"
+          v-model:value="value.spec.scaleIO.system"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.system.label')"
           :placeholder="t('persistentVolume.scaleIO.system.placeholder')"
@@ -95,7 +95,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.scaleIO.sslEnabled"
+          v-model:value="value.spec.scaleIO.sslEnabled"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.scaleIO.sslEnabled.label')"
@@ -107,7 +107,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.secretRef.name"
+          v-model:value="value.spec.scaleIO.secretRef.name"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -115,7 +115,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.secretRef.namespace"
+          v-model:value="value.spec.scaleIO.secretRef.namespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -125,7 +125,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.scaleIO.fsType"
+          v-model:value="value.spec.scaleIO.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -133,7 +133,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.scaleIO.readOnly"
+          v-model:value="value.spec.scaleIO.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/storageos.vue

@@ -26,9 +26,9 @@ export default {
       }
     ];
 
-    this.$set(this.value.spec, 'storageos', this.value.spec.storageos || {});
-    this.$set(this.value.spec.storageos, 'readOnly', this.value.spec.storageos.readOnly || false);
-    this.$set(this.value.spec.storageos, 'secretRef', this.value.spec.storageos.secretRef || {});
+    this.value.spec['storageos'] = this.value.spec.storageos || {};
+    this.value.spec.storageos['readOnly'] = this.value.spec.storageos.readOnly || false;
+    this.value.spec.storageos['secretRef'] = this.value.spec.storageos.secretRef || {};
 
     return { yesNoOptions };
   },
@@ -40,7 +40,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.storageos.volumeName"
+          v-model:value="value.spec.storageos.volumeName"
           :mode="mode"
           :label="t('persistentVolume.storageos.volumeName.label')"
           :placeholder="t('persistentVolume.storageos.volumeName.placeholder')"
@@ -48,7 +48,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.storageos.volumeNamespace"
+          v-model:value="value.spec.storageos.volumeNamespace"
           :mode="mode"
           :label="t('persistentVolume.storageos.volumeNamespace.label')"
           :placeholder="t('persistentVolume.storageos.volumeNamespace.placeholder')"
@@ -58,7 +58,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.storageos.secretRef.name"
+          v-model:value="value.spec.storageos.secretRef.name"
           :mode="mode"
           :label="t('persistentVolume.shared.secretName.label')"
           :placeholder="t('persistentVolume.shared.secretName.placeholder')"
@@ -66,7 +66,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.storageos.secretRef.namespace"
+          v-model:value="value.spec.storageos.secretRef.namespace"
           :mode="mode"
           :label="t('persistentVolume.shared.secretNamespace.label')"
           :placeholder="t('persistentVolume.shared.secretNamespace.placeholder')"
@@ -77,7 +77,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.storageos.fsType"
+          v-model:value="value.spec.storageos.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"
@@ -85,7 +85,7 @@ export default {
       </div>
       <div class="col span-6">
         <RadioGroup
-          v-model="value.spec.storageos.readOnly"
+          v-model:value="value.spec.storageos.readOnly"
           name="readOnly"
           :mode="mode"
           :label="t('persistentVolume.shared.readOnly.label')"

package/edit/persistentvolume/plugins/vsphereVolume.vue

@@ -14,7 +14,7 @@ export default {
     },
   },
   data() {
-    this.$set(this.value.spec, 'vsphereVolume', this.value.spec.vsphereVolume || {});
+    this.value.spec['vsphereVolume'] = this.value.spec.vsphereVolume || {};
 
     return { };
   },
@@ -26,7 +26,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.vsphereVolume.volumePath"
+          v-model:value="value.spec.vsphereVolume.volumePath"
           :mode="mode"
           :label="t('persistentVolume.vsphereVolume.volumePath.label')"
           :placeholder="t('persistentVolume.vsphereVolume.volumePath.placeholder')"
@@ -34,7 +34,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.vsphereVolume.storagePolicyName"
+          v-model:value="value.spec.vsphereVolume.storagePolicyName"
           :mode="mode"
           :label="t('persistentVolume.vsphereVolume.storagePolicyName.label')"
           :placeholder="t('persistentVolume.vsphereVolume.storagePolicyName.placeholder')"
@@ -44,7 +44,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.vsphereVolume.storagePolicyID"
+          v-model:value="value.spec.vsphereVolume.storagePolicyID"
           :mode="mode"
           :label="t('persistentVolume.vsphereVolume.storagePolicyId.label')"
           :placeholder="t('persistentVolume.vsphereVolume.storagePolicyId.placeholder')"
@@ -52,7 +52,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.vsphereVolume.fsType"
+          v-model:value="value.spec.vsphereVolume.fsType"
           :mode="mode"
           :label="t('persistentVolume.shared.filesystemType.label')"
           :placeholder="t('persistentVolume.shared.filesystemType.placeholder')"

package/edit/persistentvolumeclaim.vue

@@ -20,9 +20,9 @@ import ResourceManager from '@shell/mixins/resource-manager';
 const DEFAULT_STORAGE = '10Gi';
 
 export default {
-  name: 'PersistentVolumeClaim',
-
-  components: {
+  name:         'PersistentVolumeClaim',
+  inheritAttrs: false,
+  components:   {
     Banner,
     Checkbox,
     CruResource,
@@ -48,7 +48,7 @@ export default {
     this.storageClassOptions = storageClasses.map((s) => s.name).sort();
     this.storageClassOptions.unshift(this.t('persistentVolumeClaim.useDefault'));
 
-    this.$set(this.value.spec, 'storageClassName', this.value.spec.storageClassName || this.storageClassOptions[0]);
+    this.value.spec['storageClassName'] = this.value.spec.storageClassName || this.storageClassOptions[0];
   },
   data() {
     const canListPersistentVolumes = this.$store.getters['cluster/canList'](PV);
@@ -66,12 +66,12 @@ export default {
 
     const defaultAccessModes = ['ReadWriteOnce'];
 
-    this.$set(this.value, 'spec', this.value.spec || {});
-    this.$set(this.value.spec, 'resources', this.value.spec.resources || {});
-    this.$set(this.value.spec.resources, 'requests', this.value.spec.resources.requests || {});
-    this.$set(this.value.spec.resources.requests, 'storage', this.value.spec.resources.requests.storage || DEFAULT_STORAGE);
+    this.value['spec'] = this.value.spec || {};
+    this.value.spec['resources'] = this.value.spec.resources || {};
+    this.value.spec.resources['requests'] = this.value.spec.resources.requests || {};
+    this.value.spec.resources.requests['storage'] = this.value.spec.resources.requests.storage || DEFAULT_STORAGE;
     if (this.realMode === _CREATE) {
-      this.$set(this.value.spec, 'accessModes', defaultAccessModes);
+      this.value.spec['accessModes'] = defaultAccessModes;
     }
 
     const defaultTab = this.$route.query[FOCUS] || null;
@@ -121,16 +121,16 @@ export default {
       set(value) {
         const persistentVolume = this.persistentVolumes.find((pv) => pv.metadata.name === value);
 
-        this.$set(this.value.spec, 'storageClassName', '');
+        this.value.spec['storageClassName'] = '';
 
         if (persistentVolume) {
-          this.$set(this.value.spec.resources.requests, 'storage', persistentVolume.spec.capacity?.storage);
+          this.value.spec.resources.requests['storage'] = persistentVolume.spec.capacity?.storage;
           if (persistentVolume.spec?.storageClassName) {
-            this.$set(this.value.spec, 'storageClassName', persistentVolume.spec?.storageClassName );
+            this.value.spec['storageClassName'] = persistentVolume.spec?.storageClassName ;
           }
         }
 
-        this.$set(this.value.spec, 'volumeName', value);
+        this.value.spec['volumeName'] = value;
       }
     },
     storageAmountMode() {
@@ -184,7 +184,7 @@ export default {
     checkboxSetter(key, value) {
       if (value) {
         this.value.spec.accessModes.push(key);
-        this.$set(this.value, 'accessModes', uniq(this.value.spec.accessModes));
+        this.value['accessModes'] = uniq(this.value.spec.accessModes);
       } else {
         const indexOf = this.value.spec.accessModes.indexOf(key);
 
@@ -200,14 +200,14 @@ export default {
     },
     updateDefaults(source) {
       if (source === 'new') {
-        this.$set(this.value.spec.resources.requests, 'storage', DEFAULT_STORAGE);
+        this.value.spec.resources.requests['storage'] = DEFAULT_STORAGE;
       }
 
-      this.$set(this, 'persistentVolume', null);
+      this['persistentVolume'] = null;
     },
     willSave() {
       if (this.value.spec.storageClassName === this.t('persistentVolumeClaim.useDefault')) {
-        this.$delete(this.value.spec, 'storageClassName');
+        delete this.value.spec['storageClassName'];
       }
     }
   }
@@ -234,10 +234,11 @@ export default {
     />
 
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
       :side-tabs="true"
       :default-tab="defaultTab"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         name="volumeclaim"
@@ -247,12 +248,12 @@ export default {
         <div class="row">
           <div class="col span-6">
             <RadioGroup
-              v-model="source"
+              v-model:value="source"
               name="source"
               :mode="immutableMode"
               :label="t('persistentVolumeClaim.source.label')"
               :options="sourceOptions"
-              @input="updateDefaults"
+              @update:value="updateDefaults"
             />
           </div>
           <div class="col span-6">
@@ -263,14 +264,14 @@ export default {
               >
                 <LabeledSelect
                   v-if="canListStorageClasses"
-                  v-model="value.spec.storageClassName"
+                  v-model:value="value.spec.storageClassName"
                   :options="storageClassOptions"
                   :label="t('persistentVolumeClaim.volumeClaim.storageClass')"
                   :mode="immutableMode"
                 />
                 <LabeledInput
                   v-else
-                  v-model="value.spec.storageClassName"
+                  v-model:value="value.spec.storageClassName"
                   :label="t('persistentVolumeClaim.volumeClaim.storageClass')"
                   :mode="immutableMode"
                   :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noStorageClass')"
@@ -282,7 +283,7 @@ export default {
               >
                 <LabeledSelect
                   v-if="canListPersistentVolumes"
-                  v-model="persistentVolume"
+                  v-model:value="persistentVolume"
                   :options="persistentVolumeOptions"
                   :label="t('persistentVolumeClaim.volumeClaim.persistentVolume')"
                   :selectable="isPersistentVolumeSelectable"
@@ -291,7 +292,7 @@ export default {
                 />
                 <LabeledInput
                   v-else
-                  v-model="persistentVolume"
+                  v-model:value="persistentVolume"
                   :label="t('persistentVolumeClaim.volumeClaim.persistentVolume')"
                   :mode="immutableMode"
                   :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noPersistentVolume')"
@@ -302,7 +303,7 @@ export default {
               <div class="col span-12 mt-10">
                 <UnitInput
                   ref="volumeSize"
-                  v-model="value.spec.resources.requests.storage"
+                  v-model:value="value.spec.resources.requests.storage"
                   :label="t('persistentVolumeClaim.volumeClaim.requestStorage')"
                   :mode="storageAmountMode"
                   :input-exponent="3"
@@ -341,21 +342,21 @@ export default {
         </div>
         <div>
           <Checkbox
-            v-model="readWriteOnce"
+            v-model:value="readWriteOnce"
             :label="t('persistentVolumeClaim.customize.accessModes.readWriteOnce')"
             :mode="immutableMode"
           />
         </div>
         <div>
           <Checkbox
-            v-model="readOnlyMany"
+            v-model:value="readOnlyMany"
             :label="t('persistentVolumeClaim.customize.accessModes.readOnlyMany')"
             :mode="immutableMode"
           />
         </div>
         <div>
           <Checkbox
-            v-model="readWriteMany"
+            v-model:value="readWriteMany"
             :label="t('persistentVolumeClaim.customize.accessModes.readWriteMany')"
             :mode="immutableMode"
           />