Subsequent to Rebol / Red Parse html rules returns true but nothing is inserted
How to mark the end of the fist main div only (when div-count is 0 first time), not the second one, or is there a way to break out of parse conditionally to a variable value ?
content: {<div class="main">
<h1>
Big TITLE
</h1>
<div>
<section>
<p>a paragraph</p>
</section>
<section>
<p>a paragraph</p>
</section>
<section>
<p>a paragraph</p>
</section>
</div>
<div>
<p>Blah Blah</p>
</div>
</div>
<div>
Another Div
</div>
<div class="main">
<h1>
Big TITLE
</h1>
<div>
<section>
<p>a paragraph</p>
</section>
<section>
<p>a paragraph</p>
</section>
<section>
<p>a paragraph</p>
</section>
</div>
<div>
<p>Blah Blah</p>
</div>
</div>
<div>
Another Div
</div>
}
rules: [
thru <div class="main">
(div-count: 1)
some [
"<div" (probe ++ div-count) skip
|
"</div>" mark: ( probe -- div-count if div-count = 0 [insert mark "closing main div"]) skip
| skip
]
]
parse/all content rules
It seems that you need a mix of opt and if keywords. Consider a simplified example:
count: 0
div: ['div some integer! /div]
probe parse [
div 1 2 3 /div
div 4 5 6 /div
div 7 8 9 /div
][
some [
div (count: count + 1) opt [if (count = 1) mark:]
]
]
probe mark
Here, after each div rule match, increment of a counter happens. After that there's an optional match -- if counter is at 1, then current input position is marked, otherwise parsing continues as-is. Because this rule is optional, parsing will continue despite its success or failure.
Additionally, if you want to break out of a parsing loop (that is, some, any or while), you can use break (returns success) or reject (returns failure), again in combination with opt, if and conditional paren! expression.
Here a solution working in Red and Rebol using your approach plus adding some selfmodification to the rules
rules: [
thru <div class="main">
(div-count: 1 clear rules/5/8 )
some [
"<div" (probe div-count: div-count + 1) skip
|
"</div>" mark: (
probe div-count: div-count - 1
if div-count = 0 [
insert mark "closing main div" append rules/5/8 [to end]
]
) [] skip
| skip
]
]
Related
It is actually a three problems in one:
[vue/no-multiple-template-root]
The template root disallows 'v-for' directives.eslint-plugin-vue
[vue/no-parsing-error]
Parsing error: Expected to be an alias, but got empty.eslint-plugin-vue
[vue/valid-v-for]
Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.eslint-plugin-vue
Can anyone help me please I am so fed with searching online for it everywhere
enter code
<template>
<div class="post" v-for="post" in posts >
<div><strong>Title</strong>{{post.title}}</div>
<div><strong>Desctiption</strong>{{post.body}}</div>
</div>
</template>
<script>
export default{
data(){
return{
posts:[
{ id: 1, title: 'javascript', body: "the desctiption"},
{ id: 2, title: 'javascript2', body: "the desctiption"},
{ id: 3, title: 'javascript3', body: "the desctiption"},
]
}
}
}
Vue.js must have a single element at the root of the template. If you have av-for directive, when the DOM is populated there will be multiple <div> elements at the root, which Vue does not allow.
So you just need to add another <div> element to surround your v-for div.
Then, move the in posts within your quotes and add a :key
<template>
<div>
<div class="post" v-for="post in posts" :key="post.id">
<div><strong>Title</strong>{{post.title}}</div>
<div><strong>Desctiption</strong>{{post.body}}</div>
</div>
</div>
</template>
In vue two you should one root element, using v-for loop will render multiple elements in the template like :
<div class="post" >
...
</div>
<div class="post" >
...
</div>
to avoid this add an extra div and bind key to the post id :key="post.id":
<template>
<div class="posts">
<div class="post" v-for="post in posts" :key="post.id">
<div><strong>Title</strong>{{post.title}}</div>
<div><strong>Desctiption</strong>{{post.body}}</div>
</div>
</div>
</template>
Good afternoon
Help me how to make a banner appear every 3-4 elements.
Here's a suggestion:
// elements is [1,2]
<div v-for="(e, i) in elements" :key="i">
<div></div>
<div></div>
<div></div>
<Banner></Banner>
<div>
Or you could do some conditional rendering based on the index so:
// elements is [1,2,3,4,5,6,7,8]
<div v-for="(e, i) in elements" :key="i">
<Banner v-if="!((i + 1) % 4)" />
<div v-else></div>
<div>
I am trying to make a dynamic component that the parent can pass in data to shape it. I am stuck on how to interpolate the index as part of passed in prop. I assume it's possible but I think I'm just interpolating it incorrectly.
// Parent
<div>
<BoxComponent
:numberOfBoxes=3
boxTitle0="Hi"
boxTitle1="Foo"
boxTitle2="Test"
>
</BoxComponent>
</div>
//BoxComponent
<div v-for="(box,index) in numberOfBoxes">
<div class="title">
{{boxTitle + ${index}}} <-----
</div>
</div>
Like #yuriy636 also proposed, I would suggest you pass an array of objects named "boxes".
If you assume boxes looks like this:
[
{title: "Hi"},
{title: "Foo"},
{title: "Test"}
]
You can simply do this:
// Parent
<div>
<box-component :boxes="boxes"/>
</div>
//BoxComponent
<div v-for="box in boxes">
<div class="title">
{{ box.title }}
</div>
</div>
I am iterating through a list of props that consists of simple HTML markup
<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
<p>{{ keyOffer.head }}</p>
<p>{{ keyOffer.sub }}</p>
</div>
and one of the props looks like this
keyOffers: [
{
id: 'offerSecond',
head: '4G network',
sub: 'Dedicated to bringing you the <span class="u_underline">best mobile service</span>
},
]
but in the output the <span> gets printed and not applied.
Any help?
Use v-html directive:
<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
<p>{{ keyOffer.head }}</p>
<p v-html="keyOffer.sub"></p>
</div>
Ref: RawHTML
I use bootswatch v3.3.6 and django 1.11.2
I want to make a button full width inside a bootstrap's table column, but something very peculiar happens as can be seen in the following pictures:
I want to make that blue button full width. I have added a btn-buy class to my template and the corresponding css:
.btn-buy.btn-primary {
"width": 100%;
}
The problem is that width property is ignored as the red arrow points. However if I click on store.css :
and write on the firebug console the property:
then the modification is applied correctly:
No matter how I write the class btn-buy or e.g if I make it an id instead, the result is the same.
This is the relevant DTL code:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="plan-thumb" class="thumbnail">
<h3>Name</h3>
<hr>
<h4 align="center">{{ plan.description }}</h4>
<ul>
<li>Calls per minute: {{ plan.requests_per_minute }}</li>
<li>Calls per day: {{ plan.requests_per_day }}</li>
<li>Calls per minute: {{ plan.requests_per_month }}</li>
</ul>
<h5 class="pull-middle">Price per month: {{ plan.price }}$</h5>
<hr>
<div class="bottom-align-text">
{# todo this should be JS instead of new url, pushing a popup of terms etc #}
<button type="button" class=" btn-buy btn-primary" href="#"> Buy
{# href="{% url 'store:buy' plan_id=plan.id %}"> #}
</button>
</div>
</div> {# end of thumbnail div #}
</div>
Any ideas on why my modifications are not being applied automatically?