vue对数组带下标的修改，页面监控不到的问题

怼烎@ 2023-01-16 02:53 84阅读 0赞

<template>
    	<div class="test">
    		
          <div>
              <div v-for="(item,index) in imgList.one" :key="item">
                {
       {item}}
                 <div @click="deleteClick('one',index)">删除</div>
             </div>
              <div @click="FunClick('one')">增加</div>
          </div>
          <div @click="FunClick('two')">two</div>
          <div @click="FunClick('three')">three</div>
          <div @click="FunClick('four')">four</div>
    
        </div>
    	</div>
    </template>
    <script>
    	export default {
    		data(){
    			
                imgList:[]
    			}
    		},
    		methods:{
          deleteClick(state,index){
             this.imgList[state].splice(index,1)
          },
          FunClick(state){
            let url='hh'
            if(this.imgList[state]&&this.imgList[state].length){
              this.imgList[state].push(url)
            }else{
              //由于通过下标push改变数据的，页面上监控不到，需要$set刷新，
              // 调用方法：this.$set( target, key, value )
              // target：要更改的数据源(可以是对象或者数组)
              // key：要更改的具体数据
              // value ：重新赋的值
              this.$set(this.imgList,state,[])
              this.imgList[state].push(url)
            }
            console.log('ksksksk',this.imgList);
          }
    
    		}
    	}
    </script>

同下面链接中的情况

[https://www.jianshu.com/p/6f28f5abee08][https_www.jianshu.com_p_6f28f5abee08]

[https_www.jianshu.com_p_6f28f5abee08]: https://www.jianshu.com/p/6f28f5abee08

发表评论取消回复

表情：

评论列表（有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

相关带角标的RadioButton

[RadioButton小红点、数字角标的实现\_radiobutton 添加数量角标\_一杯清泉的博客-CSDN博客][RadioButton_radiobutton _-C

水深无声/ 2023年10月04日 10:37/ 0 赞/ 19 阅读

相关 20191113部分标的无法满标的问题总结及延伸思考

问题发现: > 2019年11月13日，部分标的无法自动满标。问题分析： > ①通过admin系统管理-接口列表-项目接口-标的其他接口-查看出借订单功能发现有一笔出借

怼烎@/ 2023年06月26日 05:41/ 0 赞/ 14 阅读

相关 vue对数组带下标的修改，页面监控不到的问题

<template> <div class="test"> <div> <div v-for="

怼烎@/ 2023年01月16日 02:53/ 0 赞/ 85 阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 208 阅读

相关 VUE修改数组中对象的方法

VUE根据index，直接修改数组是无法做到动态渲染的，以下两种方法可以动态修改数组中数据的渲染 1、splice方式，具体参考splice方法 let xAxis

Myth丶恋晨/ 2022年10月29日 04:27/ 0 赞/ 296 阅读

相关 cookie不同页面访问不到的问题

一般设置cookie的方法是setcookie(key, value, expire)，参数分别的意思是建、值、过期时间，这里是大众的默认设置方法，但是忽略了一个问题，setc

缺乏、安全感/ 2022年08月09日 11:56/ 0 赞/ 172 阅读

相关 linux下jps命令找不到的问题

jps是用来查看进程的命令。搭建rocketmq时，常常要用jps来查看名称服务是否已启动，但是某些机器报错如下： -bash: jps: command not

野性酷女/ 2022年06月16日 01:57/ 0 赞/ 845 阅读

相关 linux下对nginx的监控（页面展示、命令查看）

nginx的状态监控，主要是指nginx的进程数，创建的tcp连接数，当前等待的连接数等。对nginx的状态监控，有助于排查nginx运行中遇到的问题，快速定位

布满荆棘的人生/ 2022年05月19日 12:59/ 0 赞/ 227 阅读

相关 zabbix添加对web页面url的状态监控

[zabbix添加对web页面url的状态监控][zabbix_web_url] zabbix3.0.4添加对web页面url的状态监控 1、应用集配置在配

你的名字/ 2022年04月24日 04:48/ 0 赞/ 329 阅读

相关对于vue数组内容修改不同步的问题

今天遇到了一个问题,就是我在定义好的数组里边,修改某个对象的内容,结果不同步在我修改之后,打印了数组,明明已经是更新状态了,为什么页面视图不同步呢答案全部在这里↓↓

墨蓝/ 2022年03月15日 07:16/ 0 赞/ 206 阅读