在vue中更改数据后，UI未更新

Question

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

<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)">❌</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)">❌</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才会重新呈现（更新）。屏幕截图相同。

如何解决这个问题？

Answer 1

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

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

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