undefinedfix
Sign in

How to modify a value in multidimensional array under data in Vue?

Abdelwahhab edited in Fri, 03 Jun 2022

图片描述

This is the current value of data. How to modify the value in children [0] under Tour [0]?

Vue.set(app.tour[index].children,i,{vaule:'东航'})
set的话好像只能修改children[0],不知道怎么修改value的值?

Demo page: http://nbdm.net/vue.html The example is as follows:

4 Replies
Mahdi
commented on Sat, 04 Jun 2022

The test passed

<!DOCTYPE HTML>
<html lang="zh-hans" class="han-init">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 设置页面主题色 -->
    <meta name="theme-color" content=#ffffff">
    <!-- 360浏览器选择渲染内核 -->
    <meta name="renderer" content="webkit">
    <!-- QQ浏览器锁定竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC浏览器锁定竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- 禁用UC浏览器功能 -->
    <meta name="wap-font-scale" content="no">
    <title>首页</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="item">
        {{tour[0]['children'][0]['title']}}
        <br>
        {{tour[0]['children'][0]['type']}}
        <br>
        {{tour[0]['children'][0]['value']}}
        <br>
        <button @click="changeChildren">Click Me!</button>
    </div>
</div>
</body>
<script>
    !(function () {
        const app = new Vue({
            data: {
                tour: [
                    {
                        children: [
                            {
                                title: '标题',
                                type: 0,
                                value: '内容',
                            }
                        ]
                    }
                ]
            },
            created() {
            },
            mounted() {
            },
            computed: {},
            watch: {},
            methods: {
                changeChildren() {
                    this.$set(this.tour[0]['children'][0], 'type', 666);
                    this.$set(this.tour[0]['children'][0], 'value', '法法发');
                    this.$set(this.tour[0]['children'][0], 'title', '嗖嗖嗖');
                }
            },
        }).$mount('#app');
    })();
</script>
</html>
JSkrzecz
commented on Sat, 04 Jun 2022

Friendly tips: you'd better not use layui vue.js , layui has its own way of handling forms. But you have to use it vue.set () method, then you have to traverse the array once

var arr = [{ id:1,name:[{ value:"123"}]}];
arr.map((item) => {
    Vue.set(item.name,value,'456');
})
//或者用splice()
arr.splice(0,1,{ name:[{ value:"456"}]});
//备注第一个参数表示数组项的索引,第二个表示删除的项数,第三个就是要添加的项,在这里这样相当于替换操作
Vic
commented on Sat, 04 Jun 2022

Generally, it is to traverse the array and then assign a value to an object

Quippy
commented on Sat, 04 Jun 2022

Using Vue. $set

lock This question has been locked and the reply function has been disabled.