Fairly basic question as I'm going back to webdev after a few years away so experimenting.
I want to create a reusable component that wraps an error message in a formatted element:
I'd call it in my partial as...
<x-error :blah="$woof"/>
The component code would be something like this:
#error('field') "nicely formatted message" #enderror
However, I want to be able to dynamically set the field name within for the error directive, something like:
#error($field) or #error({{ $field }}) "nicely formatted message" #enderror
...while in the executing partial it would be called through something like:
<x-error :field='email'> or <x-error :field='password'> or <x-error :field='description'> or whatever field name you like.
After spending way too long trawling the web for clues I'm starting to suspect this isn't possible.
Is it? If so how do you do it? Any help or clues gratefully received
Cheers!
The answer is embarrassingly simple: leave off the semicolon! The semicolon kinda acts like a pointer to a variable, rather than passing the data directly to the component, so instead of:
<x-error :field="$title" />
It should be :
<x-error field="title" />
In the component you merely call the variable name:
#error($field)
"nicely formatted message"
#enderror
Easy, init?
Related
I need to pass vue-component in vue-cytoscape node-graph as element. See code example below:
<cytoscape :config="config">
<cy-element
v-for="def in elements"
:key="`${def.data.id}`"
:definition="<VUE-COMPONENT></VUE-COMPONENT>" // but if i make it like that, it wouldn't work
/>
</cytoscape>
Tell me please,if it's possible, thank you.
Can you suggest what is wrong with my code below?
{{#if url '===' (first (split (last (split head.meta_tags "href='")) "'")) }}
activePage
{{/if}}
I need to add a condition in the header navigation if the URL under consideration is equaled to the current page URL.
But I'm always getting false values for my condition.
Thank you in advance.
url is not a global object, which indicates to me you are inside some sort of non-global context (perhaps an each loop). You would need to go back up to the global context with a "../" (or several, depending on how deep you are). So, your code would look like this: {{#if url '===' (first (split (last (split head.meta_tags "href='")) "'")) }} activePage {{/if}}
However, you may run into issues splitting the meta tags like that. I would recommend using breadcrumbs instead. {{#contains ../breadcrumbs.1.url url}} activePage{{/contains}}.
Lastly, if you are inside a component here, you might not ever be able to get to the global context with "../" alone. You could try using the #root flag instead. {{#contains #root.breadcrumbs.1.url url}} activePage{{/contains}}.
If this still doesn't work, you will want to pass the breadcrumbs object to the component, but in order to give you code to use here, I would need to see further up the flow. Essentially, it would look like this: {{> components/menu/menu-item breadcrumbs=../breadcrumbs}}
In _createElement, I want to ask whether data.is is same to the v-bind:is?
https://github.com/vuejs/vue/blob/0baa129d4cad44cf1847b0eaf07e95d4c71ab494/src/core/vdom/create-element.js#L64
Why tag = data.is?
Thanks for every respondent!
As the comment in the code suggests, that line is specifically to handle the case where is is included inside an object v-bind. e.g.:
<component v-bind="{ is: 'button' }">Button</component>
You can see this for yourself by setting a breakpoint in your browser on that line. I'm using Webpack and Chrome and the relevant file appears under webpack:///./node_modules/vue/dist/vue.esm.js in the Sources tab. Quick search for _createElement and click in the margin to set a breakpoint.
In the example above the is value is intended to be used as the tag, whereas component is just a dummy tag that can be discarded.
The syntax above is equivalent to:
<component is="button">Button</component>
or:
<button>Button</button>
However, neither of these two examples will go into the relevant if section. In these other two cases the tag is already resolved correctly prior to this point.
My html code looks like this:
<div class="entrybody"> Some text/content </div>
I want the first letter between this piece of code (for example "Some text") to become alot much bigger every time I post something on my blog. Here is a picture of what I mean:
http://i58.tinypic.com/9hierp.png
How do I do this? I have tried with
.entrybody::first-letter but it doesn't work...
You were using :: to access the psuedo element.
Put only one :
.entrybody:first-letter
http://jsfiddle.net/zb522v2g/2/
Read more about this here: http://www.hongkiat.com/blog/css-better-paragraph/
How I can output the contents of an extends block inside of a mixin?
This is a simplified example:
mixins.jade
mixin form()
form
block
layout.jade
include mixins.jade
body
+form
block content
somepage.jade
extends layout
block content
input(type=text)
Here I would like to achieve:
<form>
<input type="text"></input>
</form>
But currently all I get is:
<form></form>
Try something along these lines:
layout.jade
doctype 5
head
title "Title"
body
block content
include mixins.jade
+form
block
SomePage.jade
extends layout
block content
input(type=text)
The fact that did not work was identified as a bug after I had created a GitHub issue and submitted a failing spec.
Per this pull request it's now possible to do what I described in my original question but as stated, this currently only works in the development branch of Jade and will be a part of the next release.