vue踩坑之this.$nextTick()
比如你想讓一個dom元素顯示,然後下一步去獲取這個元素的offsetWidth,最後你獲取到的會是0。
因為你改變資料,把show變成true,元素並不會立即顯示,理所當然也不會獲取到動態寬度。
正確的做法是先把元素show出來,在$nextTick去執行獲取寬度的操作,不知道這樣說會不會好理解一點。
openSubmenu() { this.show = true //獲取不到寬度 this.$nextTick(() => //這裡才可以 let w = this.$refs.submenu.offsetWidth; }) }
相關推薦
vue踩坑之this.$nextTick()
比如你想讓一個dom元素顯示,然後下一步去獲取這個元素的offsetWidth,最後你獲取到的會是0。 因為你改變資料,把show變成true,元素並不會立即顯示,理所當然也不會獲取到動態寬度。 正確的做法是先把元素show出來,在$nextTick去執行獲取寬度的操作,不知道這樣說會不會好
新手學習VUE踩坑之旅---methods裡面使用箭頭函式要注意this
VUE的methods物件裡面如果函式使用箭頭函式會導致this指向的不是vue例項$vm 例子:想寫一個點選事件:點選輸入框的“x”,即可清空文字框的內容 首先為輸入框增加一個ref屬性(ref=“inputUser”),然後為“x”加一個點選事件(@click=“deleteInp”)
vue踩坑之全域性使用axios
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource,但是自從 Vue 更新到 2.0 之後,尤雨溪宣佈停止更新vue-resource,並推薦大家使用axios之後,越來越多的 Vue 專案,都選擇 axios 來完成 ajax 請求,而大型專案會使用 V
vue踩坑之旅
1.vue專案外部js(es5,es6),css檔案的引入; 方法一: 在index.html通過script ,link標籤引入,要將檔案先放入static資料夾(靜態資源)下, 注意不能放src下 方法二: 如果是es6,參照export和
vue踩坑之路
* !!vue-style-loader!css-loader?{"sourceMap":true}!../node_module
vue踩坑筆記之src的動態繫結賦值問題
我的需求是這樣的,在一個頁面點選了路由器的鏈路,將某個物件傳遞給下一個頁面,這個物件的其中就包含了一個{遞減:'',IMG:''}這樣的物件陣列,我想在跳轉的頁面將這個IMG顯示出來,於是我這樣做:在跳
Vue-router踩坑之旅(2)
報錯:vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: head原因:元件內部設定的name值是vue內的保留值。解決:修改元件內nam
angular踩坑之路:初探webpack
match 了解 contex tex component logs pen erro nco 之前費了一番力氣安裝好了angular開發環境,後面的幾天都是在angular中文官網上看文檔,照著英雄教程一步一步操作,熟悉了angular的一些基本特性,這部分沒
Angular4.0踩坑之路:探索子路由和懶加載
ati clas per 而是 配置 trap child property one 參考文章: Angular4路由快速入門 http://www.jianshu.com/p/e72c79c6968e Angular2文檔學習的知識點摘要——Angular模塊(NgMo
webpack踩坑之路 (2)——圖片的路徑與打包
img url rom file filename png 一起 類型 emp webpack踩坑之路 (2)——圖片的路徑與打包 剛開始用webpack的同學很容易掉進圖片打包這個坑裏,比如打包出來的圖片地址不對或者有的圖片並不能打包進我們的目標文件夾裏(bund
webpack踩坑之旅
image cnp conf 項目 style win src 丟失 文件 1、安裝webpack失敗問題 錯誤原因: 這主要是我以普通用戶的身份進行webpack的全局安裝,權限不夠。 【普通用戶】 說白了就是通過運行window+r+cmd進入的命令行 解決方式:
Vue踩坑系列
route fun 加載 關系 監聽 沒有 踩坑 eid ram 前言 前端開發對於vue的使用已經越來越多,它的優點就不做介紹了, 本篇是我對vue使用過程中遇到的問題中做的一些總結,幫助大家踩坑。如果喜歡的話可以點波贊,或者關註一下,希望本文可以幫到大家!!! 本篇介紹
Ubuntu搭建Hadoop的踩坑之旅(三)
namenode 結束 ctu mapreduce 分布 使用 framework 2.6 start 之前的兩篇文章介紹了如何從0開始到搭建好帶有JDK的Ubuntu的過程,本來這篇文章是打算介紹搭建偽分布式集群的。但是後來想想反正偽分布式和完全分布式差不多,所幸直接介紹
Vue 爬坑之路(一)—— 使用 vue-cli 搭建項目 (增補)
web http class 模板 clas ebp 搭建 com png cd 指定好安裝目錄 vue init webpack 項目名稱 執行 vue vue list 查看可應用模板 vue init webpack +名字
一次痛苦又甜蜜的微信支付踩坑之旅
call utf-8 客戶 打開 區分 AD times jpg 運算 凡是和錢打交道的事,沒有一樣是容易的。這是我第一次接觸微信支付,發現網上還是有很多同學在求助,XXX了怎麽辦?XXX是什麽情況?為了幫助更多的小夥伴脫離“苦海”,我決定寫下這次的踩坑之旅,給更多的人幫助
20180408-20180413 vue踩坑
search efault isp sco src 狀態 添加 link 別人 在vue的template裏,註意駝峰寫法,如: :style="{marginLeft:`-${mleft}px`}" 在一個methods裏調用另一個methods: this
Vue 爬坑之路(四)—— 與 Vuex 的第一次接觸
參數 之間 scrip span 變量 tle 技術分享 管理 tool 在 Vue.js 的項目中,如果項目結構簡單, 父子組件之間的數據傳遞可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660
Vue 爬坑之路(一)—— 使用 vue-cli 搭建項目
wrong run 自己 文件的 ima tca 來安 mage 前綴 vue-cli 是一個官方發布 vue.js 項目腳手架,使用 vue-cli 可以快速創建 vue 項目,GitHub地址是:https://github.com/vuejs/vue-cli 一、
Vue 爬坑之路(二)—— 組件之間的數據傳遞
組件 圖片 NPU tar bubuko 9.png com clas entry Vue 的組件作用域都是孤立的,不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。 首先用 vue-cli 創建一個項目,其中 App.vue 是父組
Vue 爬坑之路(三)—— 使用 vue-router 跳轉頁面
cli 分類 ace local outer log 適合 創建 start 使用 Vue.js 做項目的時候,一個頁面是由多個組件構成的,所以在跳轉頁面的時候,並不適合用傳統的 href,於是 vue-router 應運而生。 官方文檔: https://router.v