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