I’m working on a simple inline editing component for a project, and have it mostly working, except that once the edit happens, the bound variable doesn’t update the way I’d like it.
The basic approach is that I have a table cell that just has the variable text, and then on double-click I swap in an input field populated with the text value.
Why is the computedCellValue
not getting the updated value of the input when it gets edited?
<script setup>
import { defineProps, ref, computed, nextTick } from 'vue';
const props = defineProps([
"cellValue",
"prefix",
"postfix"
]);
const isEditing = ref(false);
const inputField = ref(null);
const computedCellValue = computed(() => props.cellValue);
function toggleEditOn() {
isEditing.value = true;
nextTick(function () {
inputField.value.focus();
inputField.value.select();
});
}
function toggleEditOff() {
isEditing.value = false;
}
</script>
<template>
<td class="w-64 mx-1" @dblclick="toggleEditOn()" v-show="isEditing == false">
{{ props.prefix }}{{ computedCellValue }}{{ props.postfix }}
</td>
<td class="w-64 mx-1" v-show="isEditing == true">
{{ props.prefix }}<input class="w-64 bg-slate-400 p-1 text-white" ref="inputField" type="text" :value="computedCellValue" @blur="toggleEditOff()" @focus="focused" @keyup.enter="toggleEditOff()">{{ props.postfix }}
</td>
</template>