Fix unexpected side effect in computed function

Author: webdevnerdstuff

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to the "vuetify-inline-fields" plugin will be documented in
 2024-03-13
 [main] (@webdevnerdstuff)
 * Change component to use `defineAsyncComponent`
+* Fix unexpected side effect in computed function
 
 ## v1.0.6
 2024-02-26

dist/vuetify-inline-fields.cjs.js

@@ -226,6 +226,7 @@ const theClearIcon = computed(() => {
 const displayValue = computed(() => {
 	if (modelValue.value && modelValue.value[settings.itemTitle as string]) {
 		setEmptyValue(false);
+
 		return modelValue.value[settings.itemTitle as string];
 	}
 
@@ -237,7 +238,7 @@ const displayValue = computed(() => {
 	return settings.emptyText;
 });
 
-function setEmptyValue(val) {
+function setEmptyValue(val: boolean) {
 	empty.value = val;
 }
 

dist/vuetify-inline-fields.es.js

@@ -174,7 +174,7 @@ watch(() => loadingProp.value, (newVal, oldVal) => {
 // ------------------------------------------------ The displayed value //
 const displayValue = computed(() => {
 	if (modelValue.value) {
-		empty.value = false;
+		setEmptyValue(false);
 
 		if (settings.truncateLength) {
 			return useTruncateText({
@@ -187,10 +187,14 @@ const displayValue = computed(() => {
 		return modelValue.value;
 	}
 
-	empty.value = true;
+	setEmptyValue(true);
 	return settings.emptyText;
 });
 
+function setEmptyValue(val: boolean) {
+	empty.value = val;
+}
+
 
 // ------------------------------------------------ Binding Events & Props //
 const slotBindings = computed(() => ({

src/plugin/components/VInlineAutocomplete/VInlineAutocomplete.vue

@@ -225,18 +225,23 @@ const theClearIcon = computed(() => {
 // ------------------------------------------------ The displayed value //
 const displayValue = computed(() => {
 	if (modelValue.value && modelValue.value[settings.itemTitle as string]) {
-		empty.value = false;
+		setEmptyValue(false);
+
 		return modelValue.value[settings.itemTitle as string];
 	}
 
 	if (modelValue.value) {
 		return modelValue.value;
 	}
 
-	empty.value = true;
+	setEmptyValue(true);
 	return settings.emptyText;
 });
 
+function setEmptyValue(val: boolean) {
+	empty.value = val;
+}
+
 
 // ------------------------------------------------ Binding Events & Props //
 const bindingSettings = computed(() => useBindingSettings(settings));

src/plugin/components/VInlineCustomField/VInlineCustomField.vue

@@ -218,7 +218,7 @@ const theClearIcon = computed<string>(() => {
 // ------------------------------------------------ The displayed value //
 const displayValue = computed(() => {
 	if (modelValue.value) {
-		empty.value = false;
+		setEmptyValue(false);
 
 		if (settings.truncateLength) {
 			return useTruncateText({
@@ -231,10 +231,14 @@ const displayValue = computed(() => {
 		return modelValue.value;
 	}
 
-	empty.value = true;
+	setEmptyValue(true);
 	return settings.emptyText;
 });
 
+function setEmptyValue(val: boolean) {
+	empty.value = val;
+}
+
 
 // ------------------------------------------------ Binding Events & Props //
 const bindingSettings = computed(() => useBindingSettings(settings));

src/plugin/components/VInlineSelect/VInlineSelect.vue

@@ -219,7 +219,7 @@ const theClearIcon = computed<string>(() => {
 // ------------------------------------------------ The displayed value //
 const displayValue = computed(() => {
 	if (modelValue.value) {
-		empty.value = false;
+		setEmptyValue(false);
 
 		if (settings.truncateLength) {
 			return useTruncateText({
@@ -232,10 +232,14 @@ const displayValue = computed(() => {
 		return modelValue.value;
 	}
 
-	empty.value = true;
+	setEmptyValue(true);
 	return settings.emptyText;
 });
 
+function setEmptyValue(val: boolean) {
+	empty.value = val;
+}
+
 
 // ------------------------------------------------ Binding Events & Props //
 const bindingSettings = computed(() => useBindingSettings(settings));