Maybe its just the fact that I'm not used to using them, but it's hard for me to read and debug templates. I’m trying to figure out if there is a way to use JSX outside of render method or a good linter that would look inside the templates, but can't seem to find anything.
example of the simple issue where closing tag of is missing inside a template:
template:
<div id="movie-filter">
<h2>Filter results</h2>
<div class="filter-group">
<check-filter
v-for="ganre in ganres"
v-bind:title="ganre"
v-on:check-filter="checkFilter"
<!-- forgot to close the tag with ">" -->
</check-filter>
</div>
</div>
Thanks, any recomendations apreciated!
Related
I have a simple Vue app where I'm trying to render multiple custom components, here's what I'm trying:
JS
Vue.component('refinement-list', {
props: ['attribute', 'title'],
template: '<div>{{attribute}} - {{title}}</div>'
});
new Vue({
el: '#app'
});
HTML
<div id="app">
<refinement-list attribute="test" title="Test" />
<refinement-list attribute="sample" title="Sample" />
</div>
However the problem is that only the first component is rendered, see working example:
https://codepen.io/javiervd/pen/vYBpQMm
I tried registering the component locally instead but no luck. I'm also using Vue with a script tag in my app because I can't use a build system for this particular project, not sure if that matters.
Can anyone point me in the right direction? Thanks.
Since you are defining the template in the DOM, you can't use self-closing tags for the custom components.
This should work:
<div id="app">
<refinement-list attribute="test" title="Test"></refinement-list>
<refinement-list attribute="sample" title="Sample"></refinement-list>
</div>
This limitation doesn't exist in template strings or Single File Components.
You can read more about this here: https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended
You should give like this in the HTML section if you want to use the self-closing tags. But it's not recommended for DOM Templates
<div id="app">
<div>
<refinement-list attribute="test" title="Test1" />
</div>
<div>
<refinement-list attribute="test" title="Test2" />
</div>
</div>
I forked your codepen and can confirm this is working with the separate closing tag style, in place of using self-closing tags for the components.
<div id="app">
<refinement-list attribute="test" title="Test"></refinement-list>
<refinement-list attribute="sample" title="Sample"></refinement-list>
</div>
ref: https://codepen.io/edm00se/pen/pozpqym?editors=1010
The self-closing tag versus (full?) closing tag is discussed in the vue style guide page (v2) and it is expressed that for string templates (as I suspect codepen is doing when loading your HTML content), to use the closing tag, while self-closing are fine in single-file components, JSX, and string templates (things which are processed during build and component names are better known).
I am working with Laravel Scout and alogolia as the driver. Since I have vue on the front end, I tried the vue instant search package which works really well.
The issue that I am facing is that I need to customize it to the in app styles we are using.
Refinement Section
This is the particular component I am trying to customize. It tried over riding the classes like they show in Styling Section but that won't cut it for me since I need to add more tags and attributes in there.
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
Hello
</div>
</ais-refinement-list>
Now I know I can start to write an inline template like so but what I don't understand yet, is how to get the values for refinements so I can make the checkboxes and furthermore how to send them back to the component once they are selected. Any help is appreciated.
I dug through the package it self here and then found the template inside here. For some reason I could not see this in vendor code.
Got all the variables and method calls from in there
This is the custom version:
<ais-refinement-list attribute-name="categories.title" inline-template>
<div class="column w-1/5">
<h3>Categories</h3>
<hr class="my-3">
<div class='column w-full mb-4' v-for="facet in facetValues">
<div class="checkbox-control mb-4">
<input type="checkbox" :id="facet.name" :value="facet.name" v-model="facet.isRefined" #change="toggleRefinement(facet)"/>
<label :for="facet.name">{{ facet.name }} ({{ facet.count }})</label>
</div>
</div>
</div>
</ais-refinement-list>
I am trying to use components in v-html.
I want to get html from own API, then I will show that.
Here is my code.
HTML:
<!-- app -->
<div id="app">
<span v-html="html"></span>
<badge></badge>
<span v-html="html2"></span>
<partial name="my-partial"></partial>
<span v-html="html3"></span>
</div>
Javascript:
Vue.component('badge', {
template: '<span class="component-tag">This is component</span>',
})
Vue.partial('my-partial', '<p>This is a partial!</p>')
// start app
new Vue({
el: '#app',
data: {
html: '<p>THIS IS HTML</p>',
html2: '<badge></badge>',
html3: '<partial name="my-partial"></partial>'
}
})
https://jsfiddle.net/9w3kz6xm/4/
I tried partials because Vue document says " If you need to reuse template pieces, you should use partials."
It does not work. Maybe I am making mistake, I don't know what is a mistake.
Thank you.
Pretty sure Vuejs makes it very hard to directly use external html. v-html will simply replace the html content and therefore will not execute any directive. The purpose of it is to avoid XSS attacks as documented here: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.
If you really need to use external html, it is possible to use Vue.compile() documented here: https://v2.vuejs.org/v2/api/#Vue-compile
A working example can be found here: https://jsfiddle.net/Linusborg/1zdzu7k1/
and its related discussion can be found here: https://forum.vuejs.org/t/vue-compile-what-is-staticrenderfns-render-vs-staticrenderfns/3950/7
I am having issues with a simple jade layout, for example:
include test.jade
#bar hi
and in test.jade
#foo hello
And no matter what, the #bar is always rendered as a child of #foo.
<div id="foo">hello
<div id="bar">hi</div>
</div>
When I am trying to achieve
<div id="foo">hello</div>
<div id="bar">hi</div>
I'm confused if I'm doing something wrong or if this is the intended behaviour of jade?
I am building my jade templates with brunch and static-jade-brunch so I'm not sure if that is where the problem lies or if I am missing something?
Hm, okay, I'm not sure if this is the right solution, but I found I had to wrap the include in a block:
block test
include test.jade
#foo hello
and I have the desired output.
I'm following this tutorial to learn Meteor. After adding the first JS code, I'm getting [object Object] on my browser. I've followed everything as explained (except for some names that I have changed, but I haven't used any reserved words), but I cannot see anything else. This part is in the first 4 minutes. This is how my files look:
demonstration.js:
CalEvents = new Meteor.Collection('calevents');
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Meteor.Router.add({
'/':'home',
'/calendar':'calendar'
})
calendar.html:
<template name="calendar">
<div id="calendar">
Hello world! Now at calendar.
</div>
</template>
home.html:
<template name="home">
<div class="hero-unit">
<p>Manage your calendar</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</template>
demonstration.html:
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
I suspect it has something to do with the Meteor.Router.add() line, because the little I did prior to adding this worked. I have tried changing the page to show on '/' to other pages that contained a simple text, but it didn't work.
Edit to add: I am working thru Nitrous.io and I installed Meteorite prior to adding the router package.
Thanks in advance.
PS: I have searched in here and on Google but I haven't been able to find any answer to this question. If there is one, kindly point me to the right address.
Lots of examples that use Meteor prior to version 0.8 will not work, so make sure you check out a recently updated example, like those on Discover Meteor.
In this case, router has been fixed to support Meteor 0.8 and your example will work by replacing {{renderPage}} with {{> renderPage}}. However, the rest of the example probably won't work, and as others have mentioned, router has been deprecated for Iron Router.