欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何添加數(shù)組頁面及時(shí)顯示

 更新時(shí)間:2022年04月20日 11:36:15   作者:epines  
這篇文章主要介紹了vue如何添加數(shù)組頁面及時(shí)顯示,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

如何添加數(shù)組頁面及時(shí)顯示

最近在做vue相關(guān)的項(xiàng)目,在過程中,遇到了很多問題,有的解決了,有的還沒解決,其中一個(gè)比較好的問題是,一個(gè)評論回復(fù)功能,點(diǎn)擊回復(fù),可以把內(nèi)容獲取到并且加入數(shù)組中,但頁面不會及時(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è)評論下的回復(fù)
//點(diǎn)擊添加到對應(yī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í)顯示到頁面上了

給對象中添加數(shù)組

this.$set(對象, key, 數(shù)組)

例如:

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

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦)

    vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦)

    這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動(dòng)操作的函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • Vue中CSS?scoped的原理詳細(xì)講解

    Vue中CSS?scoped的原理詳細(xì)講解

    在組件中增加的css加了scoped屬性之后,就在會在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • 基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法

    基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法

    VuePress是一個(gè)基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。這么文章給大家詳細(xì)介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法,需要的朋友參考下吧
    2018-04-04
  • IntelliJ IDEA編輯器配置vue高亮顯示

    IntelliJ IDEA編輯器配置vue高亮顯示

    這篇文章主要為大家詳細(xì)介紹了IntelliJ IDEA編輯器配置vue高亮顯示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Vue微信公眾號網(wǎng)頁分享的示例代碼

    Vue微信公眾號網(wǎng)頁分享的示例代碼

    這篇文章主要介紹了Vue微信公眾號網(wǎng)頁分享的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • Vue之Dep和Observer的用法及說明

    Vue之Dep和Observer的用法及說明

    這篇文章主要介紹了Vue之Dep和Observer的用法及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表

    在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表

    這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 最新評論