fix(plugin-jsx): v-model argument and modifier co-usage (#668)

vuejs · Jan 12, 2024 · d352b58 · d352b58
1 parent 55bab7a
commit d352b58
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 1 deletion.
diff --git a/packages/babel-plugin-jsx/README-zh_CN.md b/packages/babel-plugin-jsx/README-zh_CN.md
@@ -162,10 +162,14 @@ const App = {
 
 ```jsx
 <input v-model={[val, ['modifier']]} />
+// 或者
+<input v-model_modifier={val} />
 ```
 
 ```jsx
 <A v-model={[val, 'argument', ['modifier']]} />
+// 或者
+<input v-model:argument_modifier={val} />
 ```
 
 会编译成：

diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md
@@ -166,10 +166,14 @@ const App = {
 
 ```jsx
 <input v-model={[val, ['modifier']]} />
+// Or
+<input v-model_modifier={val} />
 ```
 
 ```jsx
 <A v-model={[val, 'argument', ['modifier']]} />
+// Or
+<input v-model:argument_modifier={val} />
 ```
 
 Will compile to:

diff --git a/packages/babel-plugin-jsx/src/parseDirectives.ts b/packages/babel-plugin-jsx/src/parseDirectives.ts
@@ -67,7 +67,7 @@ const parseDirectives = (params: {
     .replace(/^\S/, (s: string) => s.toLowerCase());
 
   if (directiveArgument) {
-    args.push(t.stringLiteral(directiveArgument));
+    args.push(t.stringLiteral(directiveArgument.split('_')[0]));
   }
 
   const isVModels = directiveName === 'models';

diff --git a/packages/babel-plugin-jsx/test/v-model.test.tsx b/packages/babel-plugin-jsx/test/v-model.test.tsx
@@ -286,3 +286,48 @@ test('Named model', async () => {
   await wrapper.trigger('click');
   expect(wrapper.html()).toBe('<div>2</div>');
 });
+
+test('named model and underscore modifier should work in custom component', async () => {
+  const Child = defineComponent({
+    emits: ['update:value'],
+    props: {
+      value: {
+        type: Number,
+        default: 0,
+      },
+      valueModifiers: {
+        default: () => ({ double: false }),
+      },
+    },
+    setup(props, { emit }) {
+      const handleClick = () => {
+        emit('update:value', 3);
+      };
+      return () => (
+        <div onClick={handleClick}>
+          {props.valueModifiers.double ? props.value * 2 : props.value}
+        </div>
+      );
+    },
+  });
+
+  const wrapper = mount(
+    defineComponent({
+      data() {
+        return {
+          foo: 1,
+        };
+      },
+      render() {
+        return <Child v-model:value_double={this.foo} />;
+      },
+    })
+  );
+
+  expect(wrapper.html()).toBe('<div>2</div>');
+  wrapper.vm.$data.foo += 1;
+  await wrapper.vm.$nextTick();
+  expect(wrapper.html()).toBe('<div>4</div>');
+  await wrapper.trigger('click');
+  expect(wrapper.html()).toBe('<div>6</div>');
+});