want to insert a new empty line before a selected array element while we loop through it using v-for to create a list..trying to do this using \n isn't working
<!-- this is the template part -->
<ul>
<li v-for = "ninja in ninjas" > {{ninja}}</li>
</ul>
/* this is the script part notice index no 2 in the array*/
data() {
return {
ninjas: [
'mati kahe kumhaar sey, tu kya ronday mohey',
' Ik din aisa aayega mai rondungi tohe',
'\n aaye hain toh jaayengay Raja, Rank, fkeer',
' Ik sinhaasan chodi chale, Ik baandhay zanjeer'
]
};
},
This is pretty easy to do using the <pre> tag which forces it to preserve white space, new lines, etc. This is often used for preserving formatting in code examples.
<div id="app">
<ul>
<li v-for = "ninja in ninjas" ><pre>{{ninja}}</pre></li>
</ul>
</div>
working example: https://jsfiddle.net/skribe/10yL6va8/8/
You will probably want to use css to style the text surrounded by <pre> since most browsers automatically format it differently.
Related
I am facing a strange problem.
I use VueTableDynamic as a table library (https://github.com/TheoXiong/vue-table-dynamic)
The whole implementation is correct but there is a small problem... I have certain columns that I want to render with html (for example I want to put a download icon with an href)
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ?
`<a href=${invoice.media[0].original_url}>Download invoice</a>` :
'No invoice',
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
<div class="col-lg" v-if="checkbox_invoices">
{{ trans.invoices.title }}
<vue-table-dynamic :params="invoices_params"></vue-table-dynamic>
</div>
But I can't render that html code and I don't think I can use v-html either
Is there just a way to put that icon there?
I tried to put automatic html code but in vain.
The library allows you to customize the content of a cell using slots: https://github.com/TheoXiong/vue-table-dynamic#slot
Example:
<template>
<vue-table-dynamic :params="params">
<template v-slot:column-5="{ props }">
<a v-if="props.cellData" href=${props.cellData}>Download invoice</a>
<span v-else>No invoice</span>
</template>
</vue-table-dynamic>
</template>
<script>
[...]
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ? invoice.media[0].original_url : null,
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
</script>
I am trying to display two different divs according to a select options, but I am only getting the first v-if. When I select "de", I do get the first div content, but I also get it when I select fr, instead of the second div.
I can't get my head around this. Any ideas of what I am getting wrong?
This goes on inside a form:
<select v-model="source" :key="source">
<option :value="de">de</option>
<option :value="fr">fr</option>
</select><br><br>
<div class="characters">
<div v-if="source === de" class="deChars" :key="source">
<h5>Special German characters:</h5>
<li v-for="character in deChars" :key="character">{{ character }}</li>
</div>
<div v-else-if="source === fr" class="frChars" :key="source">
<h5>Special French characters:</h5>
<li v-for="character in frChars" :key="character">{{ character }}</li>
</div>
<br>
</div>
on the script section I am using the options api with the data property source=" ", and two arrays for deChars and frChars.
note: those :key="source" I added to make sure it gets read when the source value changes.
The data properties:
data(){
return {
original: "",
translation: "",
source: "",
target: "en",
deChars: ["ä", "Ä", "é", "ö", "Ö", "ü", "Ü", "ß"],
frChars: ["à", "â", "ç", "é", "è", "ê", "ë", "î", "ï", "ô", "û", "ü", "œ"]
}
},
Thank you so much!
Try to remove the binding sign since it seems that de and fr are not declared as properties and they're just raw string :
<select v-model="source" >
<option value="de">de</option>
<option value="fr">fr</option>
</select>
then do v-if="source === 'de'" and v-else-if="source === 'fr'"
It seems that the problem was with the select options. THe binding seemed to mess about. Once I got rid of that, it works perfectly. So thanks for that Boussadjra. However, if on the v-if I change the de and fr to strings, it does not work. WHich is why I am adding this comment as the solution.
Trying to scrape this part: "Lounge, Showers, Lockers"
https://i.stack.imgur.com/k5mzg.png
<div class="CourseAbout-otherFacilities more">
<h3 class="CourseAbout-otherFacilities-title">Available Facilities</h3> " Lounge, Showers, Lockers "
</div>
Website:
https://www.golfadvisor.com/courses/16929-black-at-bethpage-state-park-golf-course
response.css('.CourseAbout-foodAndBeverage.more::text').get() command returns " \n "
Thank you
There are three text elements in your target div (matched by your CSS expression):
<div class="CourseAbout-otherFacilities more">FIRST<h3
<h3 class="CourseAbout-otherFacilities-title">SECOND</h3>
</h3>THIRD</div>
By using .get() you're telling Scrapy to return first match.
I recommend to use XPath expression here instead and match your element by text:
//h3[.="Available Facilities"]/following-sibling::text()[1]'
Assuming custom_fields contains this data, and I want to find out if it has an item/object with the name = "hide_options". I want to pass this to a component.
WARNING
Using occurrences in this way is a hack. If the name isn't unique enough, you may get false-positives
[
{"id":"12","name":"hide_options","value":"true"},
{"id":"13","name":"state","value":"colorado"},
{"id":"14","name":"city","value":"colorado, springs"}
]
The closest I've come up with is this:
templates\components\products\product-view.html
{{> components/products/conditionallyVisibile
hideOptions=(occurrences (join (pluck product.custom_fields "name") ",") "hide_options")
}}
components/products/conditionallyVisibile.html
<div>
hideOptions {{ hideOptions }}
</div>
Am I missing an easier Array or Collection helper that would make this easier? Most of the Array/Collection helpers are block helpers.
EDIT:
I was missing a significantly easier way to do this via the Filter Array Helper
{{#filter product.custom_fields "hide_options" property="name"}}
{{> components/products/conditionallyVisibile hideOptions=true }}
{{else}}
{{> components/products/conditionallyVisibile hideOptions=false }}
{{/filter}}
EDIT 2:
the scalar-form of
(occurrences (join (pluck product.custom_fields "name") ",") "hide_options")
is almost-equivalent to the block-form
{{#inArray (pluck product.custom_fields 'name') 'hide_options' }}
I have code like this (JSFiddle)
<li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey}}</li>
Output:
this index: 0
this index: 1
My question is:
How can I get value index first begin: 1 for example I want
output like this: this index: 1 this index: 2
How can I get count from index, i.e. output like this: this index: 1 this index: 2 this count: 2 field
you can just add 1
<li v-for="(catalog, itemObjKey) in catalogs">this index : {{itemObjKey + 1}}</li>
to get the length of an array/objects
{{ catalogs.length }}
In case, your data is in the following structure, you get string as an index
items = {
am:"Amharic",
ar:"Arabic",
az:"Azerbaijani",
ba:"Bashkir",
be:"Belarusian"
}
In this case, you can use extra variable to get the index in number:
<ul>
<li v-for="(item, key, index) in items">
{{ item }} - {{ key }} - {{ index }}
</li>
</ul>
Source: https://alligator.io/vuejs/iterating-v-for/
Alternatively, you can just use,
<li v-for="catalog, key in catalogs">this is index {{++key}}</li>
This is working just fine.
The optional SECOND argument is the index, starting at 0. So to output the index and total length of an array called 'some_list':
<div>Total Length: {{some_list.length}}</div>
<div v-for="(each, i) in some_list">
{{i + 1}} : {{each}}
</div>
If instead of a list, you were looping through an object, then the second argument is key of the key/value pair. So for the object 'my_object':
var an_id = new Vue({
el: '#an_id',
data: {
my_object: {
one: 'valueA',
two: 'valueB'
}
}
})
The following would print out the key : value pairs. (you can name 'each' and 'i' whatever you want)
<div id="an_id">
<span v-for="(each, i) in my_object">
{{i}} : {{each}}<br/>
</span>
</div>
For more info on Vue list rendering: https://v2.vuejs.org/v2/guide/list.html
Using Vue 1.x, use the special variable $index like so:
<li v-for="catalog in catalogs">this index : {{$index + 1}}</li>
alternatively, you can specify an alias as a first argument for v-for directive like so:
<li v-for="(itemObjKey, catalog) in catalogs">
this index : {{itemObjKey + 1}}
</li>
See : Vue 1.x guide
Using Vue 2.x, v-for provides a second optional argument referencing the index of the current item, you can add 1 to it in your mustache template as seen before:
<li v-for="(catalog, itemObjKey) in catalogs">
this index : {{itemObjKey + 1}}
</li>
See: Vue 2.x guide
Eliminating the parentheses in the v-for syntax also works fine hence:
<li v-for="catalog, itemObjKey in catalogs">
this index : {{itemObjKey + 1}}
</li>
Hope that helps.
Why its printing 0,1,2...?
Because those are indexes of the items in array, and index always starts from 0 to array.length-1.
To print the item count instead of index, use index+1. Like this:
<li v-for="(catalog, index) in catalogs">this index : {{index + 1}}</li>
And to show the total count use array.length, Like this:
<p>Total Count: {{ catalogs.length }}</p>
As per DOC:
v-for also supports an optional second argument (not first) for
the index of the current item.
this might be a dirty code but i think it can suffice
<div v-for="(counter in counters">
{{ counter }}) {{ userlist[counter-1].name }}
</div>
on your script add this one
data(){return {userlist: [],user_id: '',counters: 0,edit: false,}},