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]?


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

4 Replies
commented on Sat, 04 Jun 2022

The test passed

<html lang="zh-hans" class="han-init">
    <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">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<div id="app" v-cloak>
    <div class="item">
        <button @click="changeChildren">Click Me!</button>
    !(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', '嗖嗖嗖');
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) => {
arr.splice(0,1,{ name:[{ value:"456"}]});
commented on Sat, 04 Jun 2022

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

commented on Sat, 04 Jun 2022

Using Vue. $set

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