I generate a random number when the model is mounted. I want to remove the "0." The 0. and decimal. I tried adding Math.round() but that gives me a NaN. Can someone tell me what I am missing.
new Vue({
el: '#app',
data: {
mixNumber:''
},
mounted: function(){
this.myFunction();
},
methods:{
myFunction: function () {
this.mixNumber = Math.random();
this.roundNumber=Math.round();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
My ID is: {{mixNumber}}
</div>
You can use the following code:
new Vue({
el: '#app',
data: {
mixNumber:'',
roundNumber: ''
},
mounted: function(){
this.myFunction();
},
methods:{
myFunction: function () {
this.mixNumber = Math.random();
this.roundNumber = this.mixNumber.toString().split(".")[1];
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
My ID is: {{roundNumber}}
</div>
Related
I'm using vue.js to set data boolean to change after a few seconds with setTimeout, but the result shows that the data remain same. If I have already returned the data value, what's causing this?
new Vue({
el: "#app",
data: {
showMsg: false,
},
methods: {
activeMsg() {
this.showMsg = true
this.msgNone
}
},
computed: {
msgNone() {
const msgCounter = setTimeout(()=>{
clearTimeout(msgCounter)
return this.showMsg = false
},2500)
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="activeMsg">click me</button>
<p v-if="showMsg">hello</p>
</div>
computed property doesn't do asynchronous calls, Just called the setTimeout inside the method:
new Vue({
el: "#app",
data: {
showMsg: false,
},
methods: {
activeMsg() {
this.showMsg = true
const msgCounter = setTimeout(() => {
this.showMsg = false
clearTimeout(msgCounter)
}, 2500)
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="activeMsg">click me</button>
<p v-if="showMsg">hello</p>
</div>
I am trying to declare getTemp variable global so that i can use it in other function. VUE.JS
var weather = new Vue({
el: '#weather',
data: {
getTemp: []
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
this.$http.get('https://vt')
.then(response => {
this.getTemp = response.data;
})
}
},
})
;
Root instance data properties are accessible throughout the app with this.$root.variableName:
new Vue({
el: '#app',
data: {
getTemp: 'Hello World!'
},
components: {
'child1': {
template: `<div><p>child1, getTemp: {{ $root.getTemp }}</p>
<subchild></subchild>
</div>`,
components: {
'subchild': {
template: `<span>Subchild test: {{ $root.getTemp }}</span>`
}
}
},
'child2': {
template: `<p>child2, getTemp: {{ $root.getTemp }}</p>`
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child1></child1>
<child2></child2>
</div>
P.S: Now i know how to fix this. bind data with v-html
<div id="app">
<h1 v-html="math"></h1>
<button #click='change'>Change</button>
</div>
var vm = new Vue({
el: '#app',
data: function() {
return {
math: '`sum`'
}
},
methods : {
change : function() {
this.math = '`a '+Math.floor((Math.random() * 10) + 1)+'`';
this.$nextTick(function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
}
}
})
When i update data, it duplicate element ???
I dont know why, how to update MathJax with vuejs 2 ?
This is my app: Image
var vm = new Vue({
el: '#app',
data: function() {
return {
math: 'sum'
}
},
methods : {
change : function() {
this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
this.$nextTick(function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});
}
}
})
You could replace the entire contents of the MathDiv element and call MathJax.Hub.Typeset(), but there is a more efficient approach, which is to ask MathJax for the element jax for the mathematics, and call its method for replacing the formula shown by that element. So the updated code will look like:
<div id="app">
<h1 >{{ math }}</h1>
<button #click='change'>Change</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: function() {
return {
math: '`sum_1`'
}
},
mounted: function () {
this.$nextTick(function () {
MathJax.Hub.Typeset()
})
},
methods : {
change : function() {
this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
this.$nextTick(function() {
var math = MathJax.Hub.getAllJax("MathDiv")[0];
MathJax.Hub.Queue(["Text", math, this.math]);
});
}
}
})
</script>
Refer: http://docs.mathjax.org/en/latest/advanced/typeset.html#manipulating-individual-math-elements
OR
You could use v-html to bind the data to the element.
I'm trying to receive json in my vue.js app like this:
new Vue({
el: 'body',
data:{
role: '',
company: '',
list:[],
created: function() {
this.getJson();
},
methods: {
getJson: function(){
$.getJSON('http://domain.dev/data',function(task){
this.list = task;
}.bind(this));
}
}
}
});
But the result is null? When I test this in postman the url returns json. What am I doing wrong here?
EDIT:
JSON (testdata):
{"EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"Kole.Bechtelar#hotmail.com","LinkedIn":"Sterling.Schowalter#example.net","Gender":0,"password":"$2y$10$bbUlDh2060RBRVHSPHoQSu05ykfkw2hGQa8ZO8nmZLFFa3Emy18gK","PlainPassword":"gr^S=Z","remember_token":"D528C0Ba1Xzq3yRV7FdNvDd8SYbrM0gAJdFUcOBq4sNEJdHEOb2xIQ0geVhZ","Address":"0593 Dallin Parkway Apt. 499\nBotsfordborough, MT 12501","Zip":"21503-","City":"East Janiston","ProfilePicture":null,"BirthDate":"2002-10-13 00:00:00","StartDate":"1995-11-09 21:42:22","EndDate":"2011-01-27","Suspended":0,"created_at":"2016-02-29 12:21:42","updated_at":"2016-03-02 11:53:58","deleted_at":null,"role":{"RoleId":5,"RoleName":"Superadministrator","Description":"Mag administrators toevoegen en bewerken","deleted_at":null,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},"department":{"DepartmentId":6,"CompanyId":12,"DepartmentName":"com","Description":"Accusantium quae.","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41","company":{"CompanyId":12,"CompanyName":"Dare, Bailey and Bednar","Logo":null,"Address":"85762 Tabitha Lights\nWest Jettie, AK 20878-2569","Zip":"29601","City":"Traceside","KvKNumber":"84c70661-9","EcaboNumber":"fdee61e3-a22d-3332-a","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41"}}}
Here is a little example of how to load external JSON data into your component:
a.json:
{"hello": "welcome"}
index.html:
<div id="app">
<pre>{{ json.hello }}</pre>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
json: null
}
});
$.getJSON('http://localhost/a.json', function (json) {
app.json = json;
});
</script>
--- Edited ---
Or with created event:
<script type="text/javascript">
new Vue({
el: '#app',
data: {
json: null
},
created: function () {
var _this = this;
$.getJSON('http://localhost/a.json', function (json) {
_this.json = json;
});
}
});
</script>
Building on #vbarbarosh's answer, but using the browser's fetch api:
a.json:
{"hello": "welcome"}
index.html:
<div id="app">
<pre>{{ json.hello }}</pre>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
json: null
},
created: function () {
fetch("/a.json")
.then(r => r.json())
.then(json => {
this.json=json;
});
}
});
</script>
You have to bind this to the outer function, too.
getJson: function () { ...}.bind(this)
Update for Vue3
const app = Vue.createApp({
data: function() {
return {
role: '',
company: '',
list:[]
};
},
beforeMount: function() {
this.getJson();
},
methods: {
getJson: function(){
$.getJSON('http://domain.dev/data',function(task){
this.list = task;
}.bind(this));
}
}
});
const mountedApp = app.mount('body');
So, I want to create custom components using Vue.js to fetch number of social counts.
The custom components tags will be:
<fb-share src="http://google.com"></fb-share>
in which the attribute src will be the url of the link that will be counted.
The output of this component will be:
<span>265614</span>
here is the code respectively
var FBShare = Vue.extend({
props: ['src'],
computed: {
count: function() {
return $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
console.log(data[0].click_count);
return data[0].click_count;
});
}
},
template: '<span>{{ src }} - {{ count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
<fb-share src="http://google.com"></fb-share>
</div>
so, the problem is that it always show [Object object].
Thank You
The issue is the way that you are returning the count:
count: function() {
// This first return is what is actually returned and that is
// a jQuery object
return $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
console.log(data[0].click_count);
// This return does not get returned
// like you think it gets returned
return data[0].click_count;
});
}
Here is one way to resolve the issue that you are having:
var FBShare = Vue.extend({
props: ['src'],
data: function() { return { count: '' } },
ready: function() {
this.loadCount();
},
methods: {
loadCount: function() {
var _this = this;
$.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
console.log(data[0].click_count);
_this.count = data[0].click_count;
});
}
},
template: '<span>{{ src }} - {{ count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
<fb-share src="http://google.com"></fb-share>
</div>
Never mind, I found the answer.
I add the vue-resource and revise the code from it.
Here it is.
var FBShare = Vue.extend({
props: ['src'],
data: function(){
return { props: {} };
},
ready: function(){
this.$http.get('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json', function(data){
this.props = data;
});
},
template: '<span>{{ src }} - {{ props[0].share_count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
<fb-share src="http://google.com"></fb-share>
<fb-share src="http://kawaiibeautyjapan.com"></fb-share>
</div>