Vue-asynchronously manipulate style modification issues in v-for

After abstraction, the problems encountered in

are roughly like this. Please take a look at how to solve them.

    The data of the
  • page is rendered through v-for , and the id attribute is index .
  • Click the button, and the server returns the style, which looks something like this: {1: {height:"200px"}}
  • modify the corresponding element style (Note: you cannot use DOM operation) according to the returned style.
  • HTML code is as follows:
<ul>
    <li v-for="(item, index) in items" :id="index">{{item}}</li>
    </ul>
    <button @click="change"></button>
</ul>
  • js code is as follows:
data: {
    items: [1, 2, 3]
},
methods: {
    change() {
        // 
        setTimeout(() => {
            // key1/2/3liid
            let list = {
                1: { height: "100px" },
                2: { height: "200px" },
                3: { height: "300px" }
            }
        }, 1000)
    }
}

online editing points here

Mar.10,2021

<div id="app">
    <ul>
        <li v-for="(item, index) in items" :id="index" :style="getStyle(item)">{{item}}</li>
    </ul>
    <button @click="change"></button>
</div>
new Vue({
    el: '-sharpapp',
    data: {
        items: [1, 2, 3],
        list: null,
    },
    methods: {
        change() {
            var vm = this;
            // 
            setTimeout(() => {
                // key1/2/3liid
                vm.list = {
                    1: { height: '100px' },
                    2: { height: '200px' },
                    3: { height: '300px' }
                }
            }, 1000)
        },
        getStyle(item) {
            return (this.list || {})[item];
        }
    }
})

https://codepen.io/anon/pen/O.


html:
: style= "list [item]"
js:
data add list and then change the assignment to this.list= {.}

Menu