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>
Related
I want to use with v-html. I create dynamic content. Like this:
ekspresKeno: {
title: "Necə Oynanılır?",
image: "/keno/ekspres-keno-popup.jpg",
content: `
<p>Azərbaycanda ilk dəfə dünya üzrə məşhur Keno oyunları!</p>
<p>Keno oyunlarını ən azı 1 AZN, ən çoxu isə 1000 AZN olmaqla istənilən vaxt oyanaya bilərsiniz. Maksimal uduş məbləği isə 100 000 AZN-dir. </p>
<p><strong>VACİB:</strong> Təsadüfi Nömrələrin Generasiyası vasitəsi ilə nömrələnmiş nömrələrdən təsadüfi şəkildə bəziləri təyin olunur və bu nömrələr əsasında uduş kombinasiyaları təyin olunur.</p>
<p>Daha çox məlumat və bütün oyun qaydaları üçün <nuxt-link :to="$store.state.PAGES.FAQ">Yardım</nuxt-link> bölmesine bakın. </p>
`
}
And i send this ekspresKeno object as a props. And use it with v-html directive like this:
<div class="content" v-html="item.content"></div>
v-html can't render . Also v-html can't render #click event. How can i use in this case.
https://codesandbox.io/s/dazzling-grass-lw78de?file=/components/Tutorial.vue
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.
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.
While Calculating the server response time by subtracting the requestStart time from responseStart time of the Navigation Timing API, the difference is close to 0 many times on IE11 and this doesn't match with the data from the server side. This happens on pages with iframes is this a known issue or is there a workaround for this?
window.performance.timing.responseStart-window.performance.timing.requestStart
on Chrome the results are closer to server side times but not on IE11
Please make sure the request page contains enough elements and spend time to load.
Then, try to clear the cache and refresh the page (could also use Ctrl+F5 or Enable the F12 developer tools "Always refresh from server" option).
You could refer to the following code:
<body>
Go back to the article
<h1>Navigation Timing API</h1>
<span id="nt-unsupported" class="hidden">API not supported</span>
<h2>Timing info</h2>
<ul id="timing-list"></ul>
<h2>Navigation info</h2>
<ul id="navigation-list"></ul>
<small class="author">
Demo created by Aurelio De Rosa
(#AurelioDeRosa).<br />
This demo is part of the HTML5 API demos repository.
</small>
<img src="Images/Image2.jpg" />
<img src="Images/Image1.jpg" />
<img src="Images/Image3.jpg" />
<img src="Images/Image2.jpg" />
<img src="Images/Image1.jpg" />
<img src="Images/Image3.jpg" />
<script>
if (!('performance' in window) ||
!('timing' in window.performance) ||
!('navigation' in window.performance)
) {
document.getElementById('nt-unsupported').className = '';
} else {
window.addEventListener('load', function () {
var list = '';
var timings = window.performance.timing;
for (var timing in timings) {
list += '<li>' + timing + ': <span class="value">' + timings[timing] + '</span></li>';
}
list += '<li>window.performance.timing.responseStart - window.performance.timing.requestStart : <span>' + (window.performance.timing.responseStart - window.performance.timing.requestStart) + '</span></li>';
document.getElementById('timing-list').innerHTML = list;
list = '';
list += '<li>redirectCount: <span class="value">' + window.performance.navigation['redirectCount'] + '</span></li>';
list += '<li>type: <span class="value">' + window.performance.navigation['type'] + '</span></li>';
document.getElementById('navigation-list').innerHTML = list;
});
}
</script>
</body>
the result as below:
In my vue.js project, the number * 100 get wrong number.
In my template:
<div class="res-show">
总共折点: <span style="color:#ed3f14">{{ discount_point_total }}</span> <br>
相当于折扣掉总价: <span>{{discount_point_total * 100}}%</span>
</div>
in my script:
export default{
data(){
return {
discount_point_total:0.022
...
alternatively, use toFixed
<span>{{ (discount_point_total*100).toFixed(2) }}%</span>
The float point number precision lost, you can use this method to avoid the issue:
<span>{{ Math.round(discount_point_total * 100 * 100) / 100 }}%</span>
Use toFixed
{{ (0.022*100).toFixed(2) }}%
Note that the return value of this method is a string. Remember parseFloat when you use it. You need to know more about the foundation of ECMA Script.