hello in vuejs I want to separate the amount of money with a comma and a period, how can I do it with filter?
I want the currency to be like this.
<p>1.000<span>,00</span></p>
I want the part separated by comma to be gray like in the image
Vue.filter('toTL', function (value) {
return new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
});
An easy solution would be to let the filter output the HTML:
<p class="amount" v-html="$options.filters.toTL(attributes.gross_total)" />
The filter can be written like so:
Vue.filter('toTL', function (value) {
let formatted = new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
let arr = formatted.split(',');
return arr[0] + '<span>,' + arr[1] + '</span>';
});
Links:
String.prototype.split documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
Also see this StackOverflow question:
VueJS2 v-html with filter
Related
I am trying something very simple in Vue and can't get it to work.. I want my API url to update with 2 new values (valueFrom and valueTwo). I am using fetch for this.
When I console log the values, they work (2021-06-17 etc). But as soon as I put them in the url, it just comes up empty.
Here are my input fields:
<label for="dateFrom" class="mr-sm-2">From</label>
<b-form-datepicker id="dateFrom" v-model="valueFrom" class="mb-2 mr-sm-4 mb-sm-0 w-25" :min="min" :max="max"></b-form-datepicker>
<label for="dateTo" class="mr-sm-2">To</label>
<b-form-datepicker id="dateTo" v-model="valueTo" class="mb-2 mr-sm-4 mb-sm-0 w-25" :min="min" :max="max"></b-form-datepicker>
Here is the button that calls the fetch:
<b-button variant="primary" #click="$fetch()">Search</b-button>
Here is my Vue code:
data() {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const minDate = new Date(today);
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 6);
return {
items: {},
valueFrom: '',
valueTo: '',
min: minDate,
max: maxDate
}
},
async fetch() {
const api = 'https://apiurl.com/ajax/locationSearchJSON/?location=Edinburgh&arrival=${this.valueFrom}&arrivalTime=12%3A00&departure={$this.valueTo}&departureTime=12%3A00
this.items = await fetch(api).then(res => res.json())
}
I also tried concating them in the javascript way (' + this.valueFrom + ') but that just rendered an empty string as well...
You can try using the backticks/backquotes (``) in place of the apostrophes. So your url will end up as below:
`https://apiurl.com/ajax/locationSearchJSON/?location=Edinburgh&arrival=${this.valueFrom}&arrivalTime=12%3A00&departure=${this.valueTo}&departureTime=12%3A00`
Also check the second variable this.valueTo has been added to the url correctly. In your case above this is how you've added it:
{$this.valueTo}
It should be:
${this.valueTo}
I have been trying to use vuejs filter in kendo-grid-column
<kendo-grid-column field="phone" title="Phone" :template="`kendo.toString(phone) | phoneformat`" width="10%"></kendo-grid-column>
Rather being displayed as formatted string the result is displayed as
Filter I am using as:
const filters = [
{
name: "phoneformat",
execute: value => {
debugger
var piece1 = phoneNumber.substring(0, 3); //123
var piece2 = phoneNumber.substring(3, 6); //456
var piece3 = phoneNumber.substring(6); //7890
//should return (123)456-7890
return kendo.format("({0})-{1}-{2}", piece1, piece2, piece3);
}
}
];
export default filters;
I have been registering the filter globally as:
import filters from './shared/extension'
filters.forEach(f => {
Vue.filter(f.name, f.execute)
})
Help me what i am missing here.
:template="`kendo.toString(phone) | phoneformat`"
You have backticks around the :template attribute value, meaning you're binding the template prop to a JavaScript template literal which evaluates to the literal string
"kendo.toString(phone) | phoneformat"
The solution is to simply bind an expression instead
<kendo-grid-column :template="phone | phoneformat" ...
See
https://v2.vuejs.org/v2/guide/filters.html
https://v2.vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props
Is there any way to provide the translate-default value while using the filter instead of directive?
e.g:
How to achieve the same results as this
<h3 translate="TEST" translate-default="Not present"></h3>
with filter format
{{ 'TEST' | translate }}
How do i put the "translate-default" attribute when using the translate filter?
What i need to do is show the original text if the key is not present.
I have created a wrapping filter for that purpose:
.filter('txf', ['$translate', ($translate: angular.translate.ITranslateService) => {
return (input: string, stringIfNotAvailable: string = '') => {
const translation = $translate.instant(input);
return translation === input ? stringIfNotAvailable : translation;
};
}]);
I am trying to use typeahed twitter for bootstrap
https://github.com/twitter/typeahead.js
I need to change the remote dynamically according to what user types in and ANOTHER parameter.
(The goal is to retrieve the cities of a country)
trying with country="en"; does not affect it
trying with autocompleter.remote=".."; does not work.
Any idea ?
<script>
var country="fr";
var autocompleter = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: 'ajax.php?action=getVilles&country='+country+'&ville=%QUERY'
});
autocompleter.initialize();
$('#city').typeahead(null, {
name: 'city',
displayKey: 'city',
source: autocompleter.ttAdapter()
});
</script>
This is what I've done:
var tagStudies = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "autocomplete/study",
replace: function(url, uriEncodedQuery) {
study = $('#study').val();
ssp = $("#social-security").val();
return url + '?q=' + uriEncodedQuery + '&s=' + study + '&ssp=' + ssp
},
filter: function (parsedResponse) {
return parsedResponse.studies;
}
}
});
Take a look at the replace function. The first parameter is the url, and the second is what the user is typing. I made a concatenation to pass the query and 2 extra params.
If you copy the code, make sure you replace 'text' for 'value' in datumTokenizer. Hope it helps
Is it possible to use standard HTML5 input fields in an Ember.js view, or are you forced to use the limited selection of built in fields like Ember.TextField, Ember.CheckBox, Ember.TextArea, and Ember.select? I can't seem to figure out how to bind the input values to the views without using the built in views like:
Input: {{view Ember.TextField valueBinding="objectValue" }}
Specifically, I'm in need of a numeric field. Any suggestions?
EDIT: This is now out of date you can achieve everything above with the following:
{{input value=objectValue type="number" min="2"}}
Outdated answer
You can just specify the type for a TextField
Input: {{view Ember.TextField valueBinding="objectValue" type="number"}}
If you want to access the extra attributes of a number field, you can just subclass Ember.TextField.
App.NumberField = Ember.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step']
})
Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
#Bradley Priest's answer above is correct, adding type=number does work. I found out however that you need to add some attributes to the Ember.TextField object if you need decimal numbers input or want to specify min/max input values. I just extended Ember.TextField to add some attributes to the field:
//Add a number field
App.NumberField = Ember.TextField.extend({
attributeBindings: ['name', 'min', 'max', 'step']
});
In the template:
{{view App.NumberField type="number" valueBinding="view.myValue" min="0.0" max="1.0" step="0.01" }}
et voile!
Here is my well typed take on it :
App.NumberField = Ember.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step'],
numericValue: function (key, v) {
if (arguments.length === 1)
return parseFloat(this.get('value'));
else
this.set('value', v !== undefined ? v+'' : '');
}.property('value')
});
I use it that way:
{{view App.NumberField type="number" numericValueBinding="prop" min="0.0" max="1.0" step="0.01" }}
The other systems where propagating strings into number typed fields.
You may also wish to prevent people from typing any old letters in there:
App.NumberField = App.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step'],
numbericValue : function (key,v) {
if (arguments.length === 1)
return parseFloat(this.get('value'));
else
this.set('value', v !== undefined ? v+'' : '');
}.property('value'),
didInsertElement: function() {
this.$().keypress(function(key) {
if((key.charCode!=46)&&(key.charCode!=45)&&(key.charCode < 48 || key.charCode > 57)) return false;
})
}
})
Credit where its due: I extended nraynaud's answer
This is how I would do this now (currently Ember 1.6-beta5) using components (using the ideas from #nraynaud & #nont):
App.NumberFieldComponent = Ember.TextField.extend
tagName: "input"
type: "number"
numericValue: ((key, value) ->
if arguments.length is 1
parseFloat #get "value"
else
#set "value", (if value isnt undefined then "#{value}" else "")
).property "value"
didInsertElement: ->
#$().keypress (key) ->
false if (key.charCode isnt 46) and (key.charCode isnt 45) and (key.charCode < 48 or key.charCode > 57)
Then, to include it in a template:
number-field numericValue=someProperty