I'm currently writing a Vue application where I allow the editing of some components by the end user. The rendered structure is currently generated from a tree-like data structure and passed down through component props, and I have written the code that updates the saved state.
I have confirmed from the highest level component that the saved state is being appropriately updated, but the rendered state does not update as well (as in below newlines should be removed). I've looked up this issue and seen recommendations to use Vue.set()
and forceUpdate()
, but I haven't gotten either to work, so I'm manually setting the innerText of the element for the time being.
I'm assuming I'm missing something simple to enforce updating the rendering?
<template v-for="(element, index) in contents">
....
<div
class="element__ordered__list"
:class="isEditMode && 'can-drag'"
v-else-if="element.type === 2"
:key="index + '-' + element.type"
>
<div
class="element__ordered__list__item"
v-for="(step, index) in element.steps"
:key="'ol' + index"
>
<span>{{ index + 1 }}</span>
<span
class="element__edit--lists"
:contenteditable="isEditMode ? 'true': 'false'"
@blur="onOrderedListEdit($event, index, element)"
>{{step}}</span>
</div>
</div>
....
</template>
<script>
import draggable from 'vuedraggable';
export default {
name: 'InstructionContainer',
props: {
title: String,
contents: Array,
top_level: Boolean,
isEditMode: {
type: Boolean,
default: false
}
},
components: {
draggable
},
methods: {
onOrderedListEdit(evt, index, listState) {
let updatedContent = evt.target.textContent.replace('\xa0', ' '); // Remove  
evt.target.textContent = updatedContent; // Ensure updated contents
listState.steps[index] = updatedContent; // Store updated state
}
}
};
</script>