vue如何添加數(shù)組頁面及時(shí)顯示
如何添加數(shù)組頁面及時(shí)顯示
最近在做vue相關(guān)的項(xiàng)目,在過程中,遇到了很多問題,有的解決了,有的還沒解決,其中一個(gè)比較好的問題是,一個(gè)評(píng)論回復(fù)功能,點(diǎn)擊回復(fù),可以把內(nèi)容獲取到并且加入數(shù)組中,但頁面不會(huì)及時(shí)顯示。
經(jīng)過很多百度摸索,終于解決了。
讓我們一起來看看吧。
//newwrite是定義的一個(gè)數(shù)組
//push進(jìn)去用戶名和輸入的內(nèi)容,changeitems
//changeitems是我監(jiān)聽的輸入框的內(nèi)容?
//<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);
由于我有的地方是用的二維數(shù)組,所以這種push的方法就不能及時(shí)顯示到頁面上去
js代碼:
//這的items是一個(gè)二維數(shù)組?
//多個(gè)評(píng)論下的回復(fù)
//點(diǎn)擊添加到對(duì)應(yīng)的評(píng)論
_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>能傳入到數(shù)組中,不能顯示在頁面上

因此就用了另一種方法,Vue.set(this.arr, this.arr.length, text);
其中這里的this要提前定義結(jié)構(gòu)
js代碼:
//a=[] //此處_this=this _this.items[i] = new Array(); _this.a.push(_this.items[i]); //點(diǎn)擊事件中: 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>然后點(diǎn)擊回復(fù)就可以及時(shí)顯示到頁面上了

給對(duì)象中添加數(shù)組
this.$set(對(duì)象, key, 數(shù)組)
例如:
this.$set(this.modelForm, "Authorizers", this.chooseData);
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or
這篇文章主要給大家介紹了關(guān)于解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or?render?function的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦)
基于VuePress 輕量級(jí)靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表

