Vue.js：在输入字段中显示和保存带有反斜杠的原始文本

Question

我目前正在开发一个 Vue.js 项目，其中有一个包含可编辑行的动态表。每行都包含一个输入字段，我面临着在输入字段中显示和保存文本而不修改反斜杠的问题。

下面是我的代码的简化版本：

// Vue.js script setup
const inputValues = computed(() => {
    let values = {};
    for (let key in language) {
        values[key] = isEdited(key) ? editedValues.value[key] || '' : language[key] || '';
    }
    return values;
});

<!-- Vue.js template -->
<tr v-for="(value, key) in $page.props.language" :key="key" v-show="shouldShowRow(key)">
    <td :class="{ 'edited': isEdited(key) }">{{ key }}</td>
    <td :class="{ 'edited': isEdited(key) }">
        <input v-model="inputValues[key]" @input="handleInput(key, $event.target.value)">
    </td>
</tr>

在上面的代码中，inputValues计算属性负责为输入字段提供值。挑战在于输入字段显示带有转义反斜杠的文本，我需要确保显示带有原始反斜杠的原始文本。

此外，当我将编辑后的值保存回数据库时，我想保留带有反斜杠的原始原始文本，而不进行任何修改。

如何修改我的代码来实现此目的？我感谢您提供的任何指导或建议。

（一些键名称还包含反斜杠，如

blabla \"action"\ blabla

，并且它们是原始显示的。此外，当我将语言对象记录到控制台时，我可以在键和值中看到反斜杠。）

谢谢！

Answer 1

让我们试试这个：

替换此行

<input v-model="inputValues[key]" @input="handleInput(key, $event.target.value)"> 

这个：

        <input :value="inputValues[key]" @input="handleInput(key, $event.target.value)">