Vue - 在v-for中异步操作修改样式问题

Question

遇到的问题，抽象之后，大致是这样，麻烦各位看看如何解决？

• 页面的数据通过v-for渲染，id属性为index

• 点击按钮，服务器返回样式，大致是这样：{1:{height:'200px'}}

• 根据返回样式，修改对应的元素样式（注：不能使用DOM操作）

• HTML代码如下：

<ul>

    <li v-for="(item, index) in items" :id="index">{{item}}</li>

    </ul>

    <button @click="change">设置高度</button>

</ul>

js代码如下：

data: {

    items: [1, 2, 3]

},

methods: {

    change() {

        // 模拟异步请求数据

        setTimeout(() => {

            // key中1/2/3代表每个li的id

            let list = {

                1: { height: '100px' },

                2: { height: '200px' },

                3: { height: '300px' }

            }

        }, 1000)

    }

}

在线编辑点这里

Answer 1

html：:style="list[item]"&nbsp;js：data加list然后赋值改this.list={...}