fix(runtime-core): ensure v-for works with template refs in script se…

…tup during dev.
vuejs · Feb 18, 2022 · cef8124 · cef8124
1 parent 5898629
commit cef8124
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
@@ -442,4 +442,43 @@ describe('api: template refs', () => {
     await nextTick()
     expect(mapRefs()).toMatchObject(['2', '3', '4'])
   })
+
+  // #5447
+  test('string ref in v-for', async () => {
+    const list = reactive([1, 2, 3])
+    const listRefs = ref([])
+    const mapRefs = () => listRefs.value.map(n => serializeInner(n))
+    const App = {
+      setup() {
+        return { listRefs }
+      },
+      render() {
+        return h(
+          'ul',
+          list.map(i =>
+            h(
+              'li',
+              {
+                ref: 'listRefs',
+                ref_for: true
+              },
+              i
+            )
+          )
+        )
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+
+    expect(mapRefs()).toMatchObject(['1', '2', '3'])
+
+    list.push(4)
+    await nextTick()
+    expect(mapRefs()).toMatchObject(['1', '2', '3', '4'])
+
+    list.shift()
+    await nextTick()
+    expect(mapRefs()).toMatchObject(['2', '3', '4'])
+  })
 })
diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -84,7 +84,7 @@ export function setRef(
     if (_isString || _isRef) {
       const doSet = () => {
         if (rawRef.f) {
-          const existing = _isString ? refs[ref] : ref.value
+          const existing = _isString ? refs[ref] || setupState[ref]  : ref.value
           if (isUnmount) {
             isArray(existing) && remove(existing, refValue)
           } else {