fix(runtime-core): Select elements can preserve data types when stringified

Author: baiwusanyu-c

packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`stringify static html Select elements can preserve data types when stringified 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<option value=\\"string\\" v-stringify-type='string'>string</option><option value=\\"false\\" v-stringify-type='boolean'>boolean</option><option value=\\"1\\" v-stringify-type='number'>number 1</option><option value=\\"2\\" v-stringify-type='number'>number 2</option><option v-stringify-type='null'>null</option>", 5)
+
+return function render(_ctx, _cache) {
+  return _hoisted_1
+}"
+`;
+
 exports[`stringify static html should bail on bindings that are hoisted but not stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
@@ -33,6 +43,16 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`stringify static html stringify #6568 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<option value=\\"string\\" v-stringify-type='string'>string</option><option value=\\"false\\" v-stringify-type='boolean'>boolean</option><option value=\\"1\\" v-stringify-type='number'>number 1</option><option value=\\"2\\" v-stringify-type='number'>number 2</option><option v-stringify-type='null'>null</option>", 5)
+
+return function render(_ctx, _cache) {
+  return _hoisted_1
+}"
+`;
+
 exports[`stringify static html stringify v-html 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 

packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts

@@ -477,4 +477,17 @@ describe('stringify static html', () => {
     expect(code).toMatch(`<code>&lt;span&gt;show-it &lt;/span&gt;</code>`)
     expect(code).toMatchSnapshot()
   })
+
+  // #6568
+  test('Select elements can preserve data types when stringified', () => {
+    const { code } = compileWithStringify(`
+        <option :value="'string'">string</option>
+        <option :value="false">boolean</option>
+        <option :value="1">number 1</option>
+        <option :value="2">number 2</option>
+        <option :value="null">null</option>
+    `)
+
+    expect(code).toMatchSnapshot()
+  })
 })

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -318,6 +318,12 @@ function stringifyElement(
           res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
             evaluated
           )}"`
+          if (typeof evaluated !== 'object' && node.tag === 'option') {
+            res += ` v-stringify-type='${typeof evaluated}'`
+          }
+        }
+        if (evaluated === null && node.tag === 'option') {
+          res += ` v-stringify-type='${'null'}'`
         }
       } else if (p.name === 'html') {
         // #5439 v-html with constant value

packages/runtime-dom/__tests__/directives/vModel.spec.ts

@@ -6,7 +6,8 @@ import {
   vModelDynamic,
   withDirectives,
   VNode,
-  ref
+  ref,
+  createStaticVNode
 } from '@vue/runtime-dom'
 
 const triggerEvent = (type: string, el: Element) => {
@@ -1172,4 +1173,61 @@ describe('vModel', () => {
     await nextTick()
     expect(data.value).toEqual('使用拼音输入')
   })
+
+  it(`After the select tag is stringified, 
+      v-model can get the correct type`, async () => {
+    const hoist = createStaticVNode(
+      "<option value=\"string\" v-stringify-type='string'>string</option><option value=\"false\" v-stringify-type='boolean'>bool</option><option value=\"1\" v-stringify-type='number'>number</option><option value=\"2\" v-stringify-type='number'>number</option><option v-stringify-type='null'>null</option>",
+      5
+    )
+    const component = defineComponent({
+      data() {
+        return { value: '' }
+      },
+      render() {
+        return [
+          withVModel(
+            h(
+              'select',
+              {
+                value: null,
+                'onUpdate:modelValue': setValue.bind(this)
+              },
+              [hoist]
+            ),
+            this.value
+          )
+        ]
+      }
+    })
+    render(h(component), root)
+
+    await nextTick()
+    const input = root.querySelector('select')
+    const optionList = root.querySelectorAll('option')
+    const data = root._vnode.component.data
+
+    optionList[0].selected = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toBe('string')
+
+    optionList[0].selected = false
+    optionList[1].selected = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toBe(false)
+
+    optionList[1].selected = false
+    optionList[2].selected = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toBe(1)
+
+    optionList[2].selected = false
+    optionList[4].selected = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toBe(null)
+  })
 })

packages/runtime-dom/src/directives/vModel.ts

@@ -243,7 +243,18 @@ function setSelected(el: HTMLSelectElement, value: any) {
 
 // retrieve raw value set via :value bindings
 function getValue(el: HTMLOptionElement | HTMLInputElement) {
-  return '_value' in el ? (el as any)._value : el.value
+  let value = '_value' in el ? (el as any)._value : el.value
+  let stringifyType = el.getAttribute('v-stringify-type')
+  if (stringifyType === 'number') {
+    return Number(value)
+  }
+  if (stringifyType === 'boolean') {
+    return value !== 'false'
+  }
+  if (stringifyType === 'null') {
+    return null
+  }
+  return value
 }
 
 // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings