vue如何添加數(shù)組頁(yè)面及時(shí)顯示
如何添加數(shù)組頁(yè)面及時(shí)顯示
最近在做vue相關(guān)的項(xiàng)目，在過(guò)程中，遇到了很多問(wèn)題，有的解決了，有的還沒(méi)解決，其中一個(gè)比較好的問(wèn)題是，一個(gè)評(píng)論回復(fù)功能，點(diǎn)擊回復(fù)，可以把內(nèi)容獲取到并且加入數(shù)組中，但頁(yè)面不會(huì)及時(shí)顯示。
經(jīng)過(guò)很多百度摸索，終于解決了。
讓我們一起來(lái)看看吧。
//newwrite是定義的一個(gè)數(shù)組
//push進(jìn)去用戶(hù)名和輸入的內(nèi)容，changeitems
//changeitems是我監(jiān)聽(tīng)的輸入框的內(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í)顯示到頁(yè)面上去
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ù)組中，不能顯示在頁(yè)面上
因此就用了另一種方法，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í)顯示到頁(yè)面上了
給對(duì)象中添加數(shù)組
this.$set(對(duì)象, key, 數(shù)組)
例如：
this.$set(this.modelForm, "Authorizers", this.chooseData);
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3中通過(guò)遍歷傳入組件名稱(chēng)動(dòng)態(tài)創(chuàng)建多個(gè)component 組件
這篇文章主要介紹了vue3中通過(guò)遍歷傳入組件名稱(chēng)動(dòng)態(tài)創(chuàng)建多個(gè)component 組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08
詳解vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue.js表格組件開(kāi)發(fā)的實(shí)例詳解
Vue.js通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，所以本文將從各方面對(duì)Vue.js的組件開(kāi)發(fā)做一個(gè)深入介紹。有需要的朋友們可以參考借鑒。2016-10-10
vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決v-if 與 v-for 同時(shí)使用報(bào)錯(cuò)的問(wèn)題
在進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)候因?yàn)樵谝粋€(gè)標(biāo)簽上同時(shí)使用了v-for和v-if兩個(gè)指令導(dǎo)致的報(bào)錯(cuò)，遇到這個(gè)問(wèn)題如何解決呢？下面小編給大家?guī)?lái)了關(guān)于v-if 與 v-for 使用報(bào)錯(cuò)問(wèn)題分析及解決方法，一起看看吧2022-03-03