I'm using a Vue plugin vue-masked-input for masking some inputs on my site. By default the plugin works fine and as expected, but when running the same code with Pug, I ran into issues.
Working code:
<template>
<masked-input v-model="phone_number"mask="\+\1 (111) 111-1111" placeholder-char="_" placeholder="+1 (555) 555-5555" type="tel" />
</template>
Doesn't work:
<template lang="pug">
masked-input(v-model='phone_number' mask='\+\1 (111) 111-1111' placeholder-char='_' placeholder='+1 (555) 555-5555' type='tel')
</template>
I've been using Pug for quite some time now and have never encountered any issue like this. Can anybody help me out?
Explanation of the problem
The Pug code in your question doesn't result in the same HTML as your "Working code." (At least in vanilla Pug; not sure when using Pug and Vue together, but I would guess that Vue uses the same Pug.)
Most code blocks on pugjs.org are editable (e.g. on the Attributes page). You can copy-paste your Pug code to one of the editable code blocks there to see the end result:
<!-- Your "Working code" -->
<masked-input
v-model="phone_number"
mask="\+\1 (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>
Differences:
The masked-input tag is not self-closing.
\+ is converted to +.
\1 is converted to \u0001 (Unicode control character "Start of Heading").
The character is not visible on the code block above, and it's anyway stripped away when editing this answer.
The character is shown as a red dot on pugjs.org.
Screenshot from pugjs.org (I used the browser's dev tools to modify the code block on the right to span multiple lines for demonstration purposes):
If you copy-paste the mask attribute's value from pugjs.org to vue-masked-input's demo (to the left input under the heading "Your own mask"), you'll get the same result as in your second screenshot. This confirms that the problem is most likely in the incorrect value of the mask attribute.
The fix
Two changes are needed to the Pug code to fix the HTML:
Make the masked-input self-closing by appending a slash: masked-input() → masked-input()/.
This might not be necessary, but it shouldn't hurt either.
See Self-Closing Tags on Pug docs.
Escape the backslashes with additional backslashes:
\+ → \\+
\1 → \\1
Like so:
<template lang="pug">
masked-input(
v-model='phone_number'
mask='\\+\\1 (111) 111-1111'
placeholder-char='_'
placeholder='+1 (555) 555-5555'
type='tel'
)/
</template>
You can also put the Pug code on a single line, but placing it on multiple lines improves readability.
Result (identical to your "Working code"):
<masked-input
v-model="phone_number"
mask="\+\1 (111) 111-1111"
placeholder-char="_"
placeholder="+1 (555) 555-5555"
type="tel"
/>
Related
When I save my Vue JS component in VSCode the template code shown below is split from a single line into two or more, depending on the length of the "Load Depot.." string.
Sometimes, depending on the length of the string it splits in the middle of the quotes and breaks my code.
I have both ESLint or Prettier enabled in the project, but I don't know which one is responsible for this and how to fix it.
<h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading..." }} </h4>
This receives a line break in an inconvenient location
<h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading
Depot..."
}} </h4>
You can check your VSCode formatter by Ctrl + Shift + P, search Format Document ... then choose the formatter which you want.
Second, you can install Prettier ESLint - Visual Studio Marketplace. It makes Prettier work with ESlint.
In my vue-cli project i have many .vue files with tags that have trailing spaces between text node and closing tag. I need that trailing spaces (or tabs, or line breaks).
What i have in my template:
<RouterLink
:to="{name: 'vacancy', params: { id: vacancy.id }}"
class="vacancy-name-link"
>
{{ vacancy.title }}
</RouterLink>
What i want:
Vacancy title
What i have:
Vacancy title
Why i can't write code in one-line:
there is a rule in eslint vue/multiline-html-element-content-newline
in a project i have many files (more than 500) with that issue with many different tags (e.g. <span>, <a> etc.)
Is there any method to update rendered template to trim trailing spaces inside tags?
Sorry for my english.
Using the vue-markdown plugin, if I have code like this:
<div class="col">
<vue-markdown>
## Hello
</vue-markdown>
It renders like:
## Hello
In order to have the markdown treated as a heading I need to do this:
<div class="col">
<vue-markdown>
## Hello
</vue-markdown>
Is there a way to have leading indentation ignored?
Solution [temporary] from the comment of #ghybs
Looks like a known limitation: see issues
vue-markdown # 56
and
vue-markdown # 69
which proposes to wrapper component as workaround.
today I'm implementing my page in nanoc (haml templates) and I wanted to write some posts in markdown, but when it goes to multiline code blocks something weird is happening - second line in code block has additional tabs. I've tried multiple markdown syntaxes, such as:
//double tab wrapping
line 1 is fine
line 2 is wrapping (don't know why!)
and
~~~
//tilde code wrapping
line 1 is fine
line 2 is wrapping
~~~
And both solutions gives me the result something like this:
line 1 is fine
line 2 is wrapping
Inspecting elements through browser shows that there is no additional padding - this whitespace is made with tabs for sure.
Can someone help me with this? Maybe I'm doing something wrong?
When you use = in Haml to include the results of a script, Haml will re-indent the inserted text so that it matches the indentation of where it is included. For example, if you have Haml that looks something like this:
%html
%body
.foo
= insert_something
and insert_something returns some HTML like this:
<p>
This is possily generated from Markdown.
</p>
then the resulting HTML will look like this:
<html>
<body>
<div class='foo'>
<p>
This is possily generated from Markdown.
</p>
</div>
</body>
</html>
Note how the p element is indented to match its position in the document.
Normally this doesn’t matter, because of the way whitespace in HTML is collapsed. However there are HTML elements where the whitespace is important, in particular pre.
What it looks like is happening here is that your Markdown is generating something like
<pre><code>line 1 is fine
line 2 is wrapping
</code></pre>
and when it is included in your Haml file (I’m guessing you’re using Haml layouts with = yield to include the Markdown) it is being indented and the whitespace is showing up when you view the page. Note how the first line is immediately after the opening tags so there is no extra whitespace.
There are a couple of ways to fix this. If you set the :ugly option then Haml won’t re-indent blocks like this (sorry I don’t know how you set Haml options in Nanoc).
You could also use the find_and_preserve helper method. This replaces all newlines in whitespace sensitive tags with HTML entity
, so that they won’t be affected by the extra whitespace when indented:
= find_and_preserve(yield)
Haml provides an easy way to use find_and_preserve; ~ works the same as =, except that it runs find_and_preserve on the result, so you can do:
~ yield
I am using HandleBar.js in my rails jquery mobile application.
I have a json returned value data= "hi\n\n\n\n\nb\n\n\n\nhow r u"
which when used in .hbs file as {{data}} showing me as hi how r u and not as with the actual new line inserted
Please suggest me.
Pre tag helps me
Handlebars doesn't mess with newlines in your data unless you have registered a helper which is doing something with them. A good way of dealing with newlines in HTML without converting them to br tags would be to use the CSS property white-space while rendering the handlebars template in HTML. You can set its value to pre-line.
Read the related documentation on MDN
Look at the source of the generated file - your newline characters are probably there, HTML simply does not render newline characters as new lines.
You can insert a linebreak with <br />
However, it looks like you're trying to format the position of your lines using newline characters, which technically should be done by wrapping your lines in <p> or <div> tags and styling with CSS.
Simply use the CSS property white-space and set the value as pre-line
For a example:
<p style="white-space: pre-line">
{{text}}
</p>