与 Pug 一起使用时 Vue 插件行为异常

Question

我正在使用 Vue 插件 vue-masked-input 来屏蔽我网站上的一些输入。默认情况下，插件工作正常并且符合预期，但是当运行与 Pug 相同的代码时，我运行遇到问题。

工作代码：

<template>
  <masked-input v-model="phone_number"mask="\+ (111) 111-1111" placeholder-char="_" placeholder="+1 (555) 555-5555" type="tel" />
</template>

无效：

<template lang="pug">
  masked-input(v-model='phone_number' mask='\+ (111) 111-1111' placeholder-char='_' placeholder='+1 (555) 555-5555' type='tel')
</template>

我使用 Pug 已经有一段时间了，从来没有遇到过这样的问题。有人可以帮我吗？

Answer 1

问题说明

您问题中的 Pug 代码不会产生与您的“工作代码”相同的 HTML。（至少在香草 Pug 中；不确定何时同时使用 Pug 和 Vue，但我猜 Vue 使用相同的 Pug。）

pugjs.org are editable (e.g. on the Attributes page 上的大多数代码块）。您可以 copy-paste 您的 Pug 代码到那里的可编辑代码块之一以查看最终结果：

<!-- Your "Working code" -->
<masked-input
  v-model="phone_number"
  mask="\+ (111) 111-1111"
  placeholder-char="_"
  placeholder="+1 (555) 555-5555"
  type="tel"
/>

<!-- The HTML code generated from the Pug code -->
<masked-input
  v-model="phone_number"
  mask="+ (111) 111-1111"
  placeholder-char="_"
  placeholder="+1 (555) 555-5555"
  type="tel"
></masked-input>

差异：

masked-input 标签不是 self-closing。
\+ 转换为 +.
</code> 转换为 <code>\u0001（Unicode control character“标题开始”）。
- 该字符在上面的代码块中不可见，并且在编辑此答案时无论如何都会被删除。
- 字符在 pugjs.org 上显示为红点。

来自pugjs.org的截图（我使用浏览器的开发工具将右侧的代码块修改为跨越多行以用于演示目的）：

如果您 copy-paste mask 属性的值从 pugjs.org 到 vue-masked-input's demo（在“您自己的掩码”标题下的左侧输入），您将得到与第二个屏幕截图相同的结果。这确认问题很可能出在 mask 属性的错误值上。

修复

需要对 Pug 代码进行两处更改以修复 HTML:

通过附加斜线使 masked-input self-closing：masked-input() → masked-input()/。
- 这可能不是必需的，但也不应该造成伤害。
- 参见 Self-Closing Tags on Pug docs。
用额外的反斜杠转义反斜杠：
- \+→\+
- </code>→<code>\1

像这样：

<template lang="pug">
  masked-input(
    v-model='phone_number'
    mask='\+\1 (111) 111-1111'
    placeholder-char='_'
    placeholder='+1 (555) 555-5555'
    type='tel'
  )/
</template>

您也可以将 Pug 代码放在一行中，但将其放在多行中可以提高可读性。

结果（与您的“工作代码”相同）：

<masked-input
  v-model="phone_number"
  mask="\+ (111) 111-1111"
  placeholder-char="_"
  placeholder="+1 (555) 555-5555"
  type="tel"
/>

与 Pug 一起使用时 Vue 插件行为异常

Vue plugin misbehaving when used with Pug

vue.js

nuxt.js

pug

maskedinput

问题说明

修复