怎么处理vue.js在直接css /样式更改和从数组中删除项目的奇怪行为?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (251)

似乎Vue保留已删除项目的样式并将其应用于具有与删除项目相同索引的新项目。

请查看以下示例。 项目将正确删除,但我们直接更改的样式将保留下一个项目。 这是正常行为吗?

我知道我们可以在这里使用v-bind:style或v-bind:class来解决问题,但有时你需要使用直接改变样式的第三方库,在这种情况下我们不能使用v-绑定。 为什么Vue只是不删除我们从数组中删除其项目的相应DOM对象?

var init = function() {
    var app = new Vue({
        el: '.app',
        data: {
            list: [{val: 1}, {val: 2}, {val: 3}, {val: 4}, {val: 5}],
        },
        methods: {
            delete_item: function(item) {
                var index = this.list.indexOf(item);
                this.list.splice(index, 1);
            },
        },
    });
};
var make_it_red = function() {
    document.querySelectorAll('div span')[2].style.color = 'red';
};
window.onload = init;
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="app">
    <p>First click on make it red button and then try to delete red item.</p>
    <div v-for="i in list">
        <span>item {{i.val}}</span>
        <button v-on:click="delete_item(i)">delete</button>
    </div>
    <button onclick="make_it_red()">make it red</button>
</div>

提问于
用户回答回答于

问题在于,你没有v-for

试着<div v-for="i in list" :key="i" >

尽管你应该在对象内部使用专用id<div v-for="i in list" :key="i.id" >

你看到这个问题,是因为VUE使用键来标识对象,因此当有更改而没有键时,VUE将其视为相同的对象。

扫码关注云+社区

领取腾讯云代金券