vue+vue-loader v-for當資料為空數組時顯示為 undefined

<template hljs-string">"pug">
    div
        span 測試 //-- 這裡不能少
        div(v-for="idx in []") {{idx}} 
</template>
           

當元件渲染後 顯示的結果為按理說應該時 “測試”

但是實際顯示結果為 “測試undefined”

解決方法

在v-for 外面套一個div 如：

<template hljs-string">"pug">
    div
        span 測試 //-- 這裡不能少
        div
            div(v-for="idx in []") {{idx}} 
</template>
           

原因分析

1、他生成的render函數如下：

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("span", [_vm._v("測試")]),
   ① _vm._l([], function(idx) { 
        return _c("div")
      })
    ],
    
  )
}
           

① 這個位置 會渲染為一個undefined textNode

_c 這個函數的第二個參數這裡表示的是div的子元素

div 的子元素為：span和一個空素組。vue會把這個空素組渲染成一個undefined

如果我加一個的div 在v-for外面 生成的代碼是

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [
    _c("span", [_vm._v("測試")]),
    _c(
      "div",
      _vm._l([], function(idx) {
        return _c("div")
      })
    )
  ])
}
           

c 這個函數的第二個參數這裡表示的是div的子元素

第一個div的子元素是：span 和 div

地二個子元素是：其實是一個空數組是以代表沒有子元素那麼當然不會渲染任何東西

這點代會傳回一個空數組

vm._l 是vue的renderList函數

_vm._l([], function(idx) {
    return _c("div")
})