时间戳

首页 > 解决方案 > Vue中数据更改后UI未更新

vue.js - Vue中数据更改后UI未更新

问题描述

当我直接使用数组（不使其成为对象的一部分）时，它按预期工作正常，下面是代码，

<span class="tagSpan" v-else-if="row.label == 'Tags'">
    <span v-if="aTags.length" v-for="(tag, tagIndex) in aTags" class="input-tag tagSpan">{{tag}}                                           
        <span class="close-x" @click="aTags.splice(tagIndex, 1)">❌&lt;/span>
    </span>
    <input  v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>

现在我优化了代码并使 aTags 成为 oDyData 对象的一项并更改了代码如下

<span class="tagSpan" v-else-if="row.label == 'Tags'">
    <span v-if="oDyData.aTags && oDyData.aTags.length" v-for="(tag, tagIndex) in oDyData.aTags" class="input-tag tagSpan">{{tag}}                                           
        <span class="close-x" @click="oDyData.aTags.splice(tagIndex, 1)">❌&lt;/span>
    </span>
    <input  v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>

我的删除标签 '@click="aTags.splice(tagIndex, 1)' 的功能不像以前那样工作，它从对象的数组中删除了项目，但 UI 没有更新，我还在 vue 中进行了交叉检查开发组件和数组正在更新，但 UI 不会重新渲染（更新），直到 UI 发生任何其他更改（如果我在输入中输入内容或单击某处，它会发生更改）。下面是相同的屏幕截图。 标记界面

如何解决这个问题？

标签： vue.jsvuejs2

解决方案

<span class="close-x" @click="aTags.splice(tagIndex, 1)">❌&lt;/span>

利用@click="oDyData.atags.splice(tagIndex,1)

因为您试图访问未定义的 aTags 对象，因为您从 oDyData 获取此对象。O 这可能是您的代码中的问题。您还必须:key在使用属性时使用v-for。

推荐阅读