vue如何添加数组页面及时显示

目录
  • 如何添加数组页面及时显示
  • 给对象中添加数组

如何添加数组页面及时显示

最近在做vue相关的项目，在过程中，遇到了很多问题，有的解决了，有的还没解决，其中一个比较好的问题是，一个评论回复功能，点击回复，可以把内容获取到并且加入数组中，但页面不会及时显示。

经过很多百度摸索，终于解决了。

让我们一起来看看吧。

//newwrite是定义的一个数组
//push进去用户名和输入的内容，changeitems
//changeitems是我监听的输入框的内容 
//<textarea id="reply_text" cols="30" rows="10" v-model="changeitems"></textarea>
//
this.newwrite.push({
          user_id:this.userid,
          req_content:changeitems
        })
console.log(this.newwrite);

由于我有的地方是用的二维数组，所以这种push的方法就不能及时显示到页面上去

js代码：

//这的items是一个二维数组 
//多个评论下的回复
//点击添加到对应的评论
_this.items[index].push({
       user_name:_this.username,
       user_id:_this.userid,
       req_content:text
 })

html代码：

<div  v-for="(item,indexss) in items[index]" :key="indexss">
　　<span class="my_commentname">{{username}} : </span><span class="my_comment">{{item}}</span>
</div>

能传入到数组中，不能显示在页面上

因此就用了另一种方法，Vue.set(this.arr, this.arr.length, text);

其中这里的this要提前定义结构

js代码：

//a=[]
//此处_this=this
_this.items[i] = new Array();
_this.a.push(_this.items[i]);
//点击事件中：
　　Vue.set(this.a, this.a.length, text);

html代码：

<!---->
<div  v-for="(item,indexss) in a" :key="indexss">
    <span class="my_commentname">{{username}} : </span><span class="my_comment">{{item}}</span>
</div>

然后点击回复就可以及时显示到页面上了

给对象中添加数组

this.$set(对象, key, 数组)

例如：

this.$set(this.modelForm, "Authorizers", this.chooseData);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • vue 解决数组赋值无法渲染在页面的问题

    在做一个网页重构成VUE的时候,有段代码是这样的 一直能打印出pics的值,但是就是无法渲染出来,检查了不是视图那边是错,最后发现其中有两处错误,一处是this指向问题,此地打印出来的this.pics并不是data里面的pics的值,后面把success函数改成箭头函数即可,还有vue中数组赋值数组不能直接赋值. 可以用push方法,下面是修改后的代码 以上这篇vue 解决数组赋值无法渲染在页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue如何添加数组页面及时显示

    vue如何添加数组页面及时显示

    目录 如何添加数组页面及时显示 给对象中添加数组 如何添加数组页面及时显示 最近在做vue相关的项目,在过程中,遇到了很多问题,有的解决了,有的还没解决,其中一个比较好的问题是,一个评论回复功能,点击回复,可以把内容获取到并且加入数组中,但页面不会及时显示. 经过很多百度摸索,终于解决了. 让我们一起来看看吧. //newwrite是定义的一个数组 //push进去用户名和输入的内容,changeitems //changeitems是我监听的输入框的内容  //<textarea id="

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    1.前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下: 首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现. 2.我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到

  • 解决Vue 通过下表修改数组,页面不渲染的问题

    需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • 在vue中动态添加class类进行显示隐藏实例

    如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div> <!-- 查岗部分显示影藏 --> <div class

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • 解决Vue 刷新页面导航显示高亮位置不对问题

    首先:现在是我点击在产品介绍页面 但是当我刷新页面后高亮位置就变成了第一个 在头部组件里面控制导航高亮显示是checked,默认值是0,触发点击事件会重新赋值,跳转路由,当刷新页面,checked值是0,所以要监听checked时刻发生变化:利用到vue的父子和子父传值:监听状态的变化 子页面将值传给父页面 父页面接收传过来的值 父组件把值传给header头部组件,头部组件通过prop接收 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子

  • vue添加锚点,实现滚动页面时锚点添加相应的class操作

    第一步,给vue页面添加锚点 .orange{ color: #f97910; } <template> <div class="productDetail" ref="content"> <div class="tabbar"> <div @click.prevent="tabclick(index)" v-for="(item,index) in productTile&

随机推荐