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>
Related
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>
I am trying to use iMask.js to change 'yyyy-mm-dd' to 'dd/mm/yyyy' with my component however when I am setting the value I think it is taking the value before the iMask has finished. I think using maskee.updateValue() would work but don't know how to access maskee from my component.
I am also not sure if I should be using a directive to do this.
Vue.component("inputx", {
template: `
<div>
<input v-mask="" v-model="comp_date"></input>
</div>
`,
props: {
value: { type: String }
},
computed: {
comp_date: {
get: function () {
return this.value.split("-").reverse().join("/");
},
set: function (val) {
const iso = val.split("/").reverse().join("-");
this.$emit("input", iso);
}
}
},
directives: {
mask: {
bind(el, binding) {
var maskee = IMask(el, {
mask: "00/00/0000",
overwrite: true,
});
}
}
}
});
var app = new Vue({
el: "#app",
data: {
date: "2020-12-30"
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="https://unpkg.com/imask"></script>
<div id="app">
<inputx v-model="date"></inputx>
Date: {{date}}
</div>
The easiest way you can achieve this is by installing the external functionality on the mounted hook of your Vue component, instead of using a directive.
In this way you can store the 'maskee' object on your component's data object to later access it from the setter method.
Inside the setter method you can then call the 'updateValue' method as you hinted. Then, you can extract the processed value just by accessing the '_value' prop of the 'maskee' object.
Here is a working example:
Vue.component("inputx", {
template: `
<div>
<input ref="input" v-model="comp_date"></input>
</div>
`,
data: {
maskee: false,
},
props: {
value: { type: String },
},
computed: {
comp_date: {
get: function () {
return this.value.split("-").reverse().join("/");
},
set: function () {
this.maskee.updateValue()
const iso = this.maskee._value.split("/").reverse().join("-");
this.$emit("input", iso);
}
}
},
mounted(){
console.log('mounted');
const el = this.$refs.input;
this.maskee = IMask(el, {
mask: "00/00/0000",
overwrite: true,
});
console.log('maskee created');
}
});
var app = new Vue({
el: "#app",
data: {
date: "2020-12-30"
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="https://unpkg.com/imask"></script>
<div id="app">
<inputx v-model="date"></inputx>
Date: {{date}}
</div>
I have the following definition for the Vue element:
new Vue({
el: "#app",
data: {
latitude1: 'a',
name: 'aa'
},
mounted() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
this.latitude1 = position.coords.latitude;
})
} else {
this.latitude1 = "WTF??"
// this doesn't work either:
// this.$nextTick(() => { this.latitude1 = "WTF??" })
}
},
methods: {
// button works... WTF?!?
doIt() {
this.latitude1 = "WTF??"
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>{{ latitude1 }}: {{ name }}</div>
<button #click="doIt">Do it</button>
</div>
I can see the location data being populated. The alert displays the latitude but the 2 way binding for the data field latitude1 is not working.
I have tried storing the object state using this and that also did not work.
My html is as follows:
<div class="form-group" id="app">
<p>
{{latitude1}}
</p>
</div>
One of the things to do inside the Vue.js is to use the defined methods for reactive properties changes.
Here is a code I've provided for it:
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
new Vue({
el: "#app",
data: {
latitude1: 'a',
name: 'aa'
},
mounted: function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
console.log(position.coords.latitude);
Vue.set(this, 'latitude1', position.coords.latitude);
}, error, options)
}
}
});
I also set error handler and options for the navigator query. For following the results please check the console.
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');