请问vueJS如何做一个手动排序?

2019-10-17 15:26发布

问题:

有个功能,需要给手动调整名次。

所以我需要用vue做一个,顺序调整的功能

[

{"ID":"654","order":"1","name":"aaa"},

{"ID":"321","order":"2","name":"bbb"},

{"ID":"987","order":"3","name":"ccc"}

]

数据格式类似这样

界面类似于以下(【】代表下拉框):

aaa 【1】

bbb 【2】

ccc 【3】

需要做到123是可以手动调整的。

目前遇到的问题就是我根本加载不出来 对应的下拉框。

看到我的问题的,有空麻烦指导一下。

回答1:

<template>
    <div>
        <div v-for="data in data_list">
            {{data.name}}<select >
                    <option  v-for="a in data_list" :value=a.ID >{{a.order}}</option>
            </select>

        </div>
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                data_list: [

                    {"ID": "654", "order": "1", "name": "aaa"},

                    {"ID": "321", "order": "2", "name": "bbb"},

                    {"ID": "987", "order": "3", "name": "ccc"}

                ]
            }
        }
    }
</script>


回答2:

抱歉,我看描述没看明白需要的实现效果。

界面类似于以下(【】代表下拉框)

是指画面里有3个 select 标签的吗?

  1. 需要实现一个 select 标签里面的3个 option 可以动态排序吗?


标签: VueJs