fix(v-for): handle and warn when `v-for` receives non-integer range number (#2247)

close #2245

diff --git a/packages/runtime-core/__tests__/helpers/renderList.spec.ts b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
index e28c6a004ce0b4e6e7036ef040395fac458af245..48b2930c11f1d7ad3a87b36fa602270dea2e566f 100644 (file)
--- a/packages/runtime-core/__tests__/helpers/renderList.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
@@ -21,6 +21,13 @@ describe('renderList', () => {
     ])
   })
 
+  it('should warn when given a non-integer N', () => {
+    renderList(3.1, () => {})
+    expect(
+      `The v-for range expect an integer value but got 3.1.`
+    ).toHaveBeenWarned()
+  })
+
   it('should render properties in an object', () => {
     expect(
       renderList(

diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
index f8238a46a16d8a30c8c3def56190b46beea75791..de4ab8afa7f7ad004269da3e6505cbed91ea22cc 100644 (file)
--- a/packages/runtime-core/src/helpers/renderList.ts
+++ b/packages/runtime-core/src/helpers/renderList.ts
@@ -1,5 +1,6 @@
 import { VNodeChild } from '../vnode'
 import { isArray, isString, isObject } from '@vue/shared'
+import { warn } from '../warning'
 
 /**
  * v-for string
@@ -60,6 +61,10 @@ export function renderList(
       ret[i] = renderItem(source[i], i)
     }
   } else if (typeof source === 'number') {
+    if (__DEV__ && !Number.isInteger(source)) {
+      warn(`The v-for range expect an integer value but got ${source}.`)
+      return []
+    }
     ret = new Array(source)
     for (let i = 0; i < source; i++) {
       ret[i] = renderItem(i + 1, i)

diff --git a/packages/server-renderer/__tests__/ssrRenderList.spec.ts b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
index e0dab83117b695d355f96a7eb770c13664c568aa..59b5d2ddf27e05ea2f6a59abead36ca1cb599fc5 100644 (file)
--- a/packages/server-renderer/__tests__/ssrRenderList.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
@@ -24,6 +24,13 @@ describe('ssr: renderList', () => {
     expect(stack).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
+  it('should warn when given a non-integer N', () => {
+    ssrRenderList(3.1, () => {})
+    expect(
+      `The v-for range expect an integer value but got 3.1.`
+    ).toHaveBeenWarned()
+  })
+
   it('should render properties in an object', () => {
     ssrRenderList({ a: 1, b: 2, c: 3 }, (item, key, index) =>
       stack.push(`node ${index}/${key}: ${item}`)

diff --git a/packages/server-renderer/src/helpers/ssrRenderList.ts b/packages/server-renderer/src/helpers/ssrRenderList.ts
index 67c27294358ca6e6ff63c370decb166f773ce921..bde28f25759b59f8f18b990092cbd2f4a8dfa119 100644 (file)
--- a/packages/server-renderer/src/helpers/ssrRenderList.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderList.ts
@@ -1,4 +1,5 @@
 import { isArray, isString, isObject } from '@vue/shared'
+import { warn } from '@vue/runtime-core'
 
 export function ssrRenderList(
   source: unknown,
@@ -9,6 +10,10 @@ export function ssrRenderList(
       renderItem(source[i], i)
     }
   } else if (typeof source === 'number') {
+    if (__DEV__ && !Number.isInteger(source)) {
+      warn(`The v-for range expect an integer value but got ${source}.`)
+      return
+    }
     for (let i = 0; i < source; i++) {
       renderItem(i + 1, i)
     }