Simple example won't render. Here is my code:
main.js
var Vue = require('vue');
var c3 = require('c3');
new Vue({
template: '<div id="puppa"></div>',
mounted: function () {
c3.generate({
bindto: '#puppa',
data: {
type: 'area',
x: 'x',
xFormat: '%H:%M',
columns:[
['x',"12:38","12:38","12:38","12:38","12:39","12:39","12:39","12:39","12:40","12:40","12:40","12:41","12:41","12:41","12:41","12:42","12:42","12:42","12:42","12:43","12:43","12:43","12:43","12:44","12:44"],
['write', 14709198848,14709313536,14709522432,14709633024,14710034432,14710157312,14710341632,14710583296,14710788096,14710931456,14711058432,14711291904,14711508992,14711668736,14711771136,14712008704,14712107008,14712381440,14712586240,14712795136,14712963072,14713077760,14713331712,14713565184,14713729024],
['read', 3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
}
});
In your HTML.
<div id="app"></div>
Or whatever other id you want to use. You need to give your Vue an element to render it's template to. In your Vue
new Vue({
el: "#app",
mounted: function() {
c3.generate({
bindto: this.$el,
...
})
}
})
Here is an example.
Also ran across the need to downgrade the d3 version with c3.
Related
Heading
<script>
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks() //labels format
.datasets([{type: 'line', fill: false}, 'bar'])
.legend()
.colors()
.tooltip()
.title('Sample Chart'),
});
</script>
</body>
How can format labels to be vertical in Laravel chartisan? I suppose that this part of the code has to change, but I am not sure.
give this a try
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks()
.colors()
.responsive()
.beginAtZero()
.legend({ position: 'bottom' })
.datasets([{ type: 'line', fill: true }])
.custom(function ({ data, merge, server }) {
data.options.scales.yAxes = [{
ticks: {
callback: function(value, index, values) {
return '$' + value;
}
}
}]
return data
})
})
For more info visit this link:https://github.com/Chartisan/Chartisan/issues/7
I have successfully fetched data from API. The fetched data shows in the alert function. However, the properties in the data function such as - 'Recovered' is not updating. I can show the fetched data using Vanilla JS. But I want to update them automatically and want to show them like this {{Recovered}}.
How can I do it??
<template>
<div class="container">
<h2>Total Recovered: {{Recovered}}</h2>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'CoronaStatus',
data: function () {
return {
Recovered: '',
TotalConfirmed: '',
TotalDeaths: '',
// test: '30',
// test_2: 'maheeb',
// componentKey: 0,
}
},
mounted(){
this.globalStatus();
},
methods:{
globalStatus: function(){
// const self = this;
// this.componentKey += 1;
axios.get('https://api.covid19api.com/summary')
.then((response) => {
// this.recovered = response.data.Global.NewConfirmed;
this.Recovered= response.data.Global.TotalRecovered;
alert(this.Recovered);
// document.getElementById('test_5').innerHTML = "total: " + this.TotalRecovered;
}).catch(err=> console.log(err));
},
}
}
</script>
<style scoped>
</style>
The easiest solution would be to refetch the information every hour with setInterval.
The best solution would be to use the WebHook provided by covid19api.com.
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
Recovered: "Loading ..."
},
mounted() {
setInterval(() => {
this.globalStatus();
}, 3600000); // Call globalStatus every hour
this.globalStatus();
},
methods: {
globalStatus: function() {
axios
.get("https://api.covid19api.com/summary")
.then(response => {
this.Recovered = response.data.Global.TotalRecovered;
})
.catch(err => console.log(err));
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<h2>Total Recovered: {{ Recovered }}</h2>
</div>
I'm using laravel-vue-i18n-generator package to handle text translation in vuejs component in my laravel project. I've set up app.js like below:
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const lang = 'fa';
const i18n = new VueInternationalization({
locale: lang,
messages: Locale
});
const app = new Vue({
el: '#app',
i18n,
});
And in component:
<template>
<a href="#" class="tip" title="" :title="$t('component.delete.title')" #click.prevent="deleteAction">
<i :class="icon"></i>
</a>
</template>
<script>
import swal from 'sweetalert';
import axios from 'axios';
export default {
inject: ['$i18n'],
props:{
endpoint: {
type: String,
required: true,
},
icon: {
type: String,
default: 'fa fa-trash'
},
message: {
type: String,
default: this.$i18n.t('component.delete.are_you_sure'),
},
confirm: {
type: String,
default: this.$i18n.t('component.delete.confirm'),
},
cancel: {
type: String,
default: this.$i18n.t('component.delete.cancel'),
},
success: {
type: String,
default: this.$i18n.t('component.delete.success'),
},
failed: {
type: String,
default: this.$i18n.t('component.delete.failed'),
},
},
mounted() {
console.log(this);
},
methods:{
deleteAction(){
const vm = this;
swal({
text: this.message,
buttons: {
catch: {
text: this.confirm,
value: "delete",
},
cancel: this.cancel
},
dangerMode: true
}).then(name => {
if (!name) return false;
axios.delete(vm.endpoint)
.then(function (response) {
swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() => {
location.reload();
});
})
.catch(function (error) {
swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
});
});
}
}
}
</script>
<style scoped>
</style>
Fortunately $t('component.delete.title') works correctly on template part, but in script part, I've got this error:
Uncaught TypeError: Cannot read property 't' of undefined
Where do I go wrong?
This worked for me inside the script part of a component:
this.$t('message')
In vue.js if you get an error like
"_vm.translate is not a function"
It is most probably that you havent import the i18n package which contains translate method.This error occures sometimes when you try to add translate using v-bind to html attributes. Example:
<a-form-item class="mb-0" :label="`${translate('person_name.firstname')}`">
following steps can solve the error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import { translate, i18n } from '#/i18n';
#Component({
components: {
AgIconBase
},
methods:{
translate
}
})
</script>
This works for me.
I have a locales folder with index.js importing the two language files im using,
in this file add.
global.$t = Vue.t
Referred to in the script part directly as
return $t('backend.faq.main')
I would like to load data each time I click on header, then show the data (when it is loaded) into the v-expansion-panel-content.
It's not always working.
If user open the accordion before data is loaded, it wont be updated once data comes from server.
let Projects = {
template: `<v-expansion-panel >
<v-expansion-panel-content ripple v-for="project in filteredProjects "
:key="project.id" lazy><div slot="header"
#click="loadSpaces(project)">{{project.name}}</div>
<v-card>
<v-card-text class="grey lighten-3" >
<v-btn flat block
v-for="space in spaces" :key="space.id"
#click="loadLayout(project)">{{space.id}}</v-btn>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>`,
components: {
Spaces
},
props: {
searchFilter: String
},
data: () => ({
data: uniBuilderProjects.state,
}),
computed: {
filteredProjects: function () {
var self = this;
return self.data.projects.filter(function (project) {
return project.name.toUpperCase().indexOf(self.searchFilter.toUpperCase()) !== -1;
})
},
spaces: function () {
return this.data.spaces;
}
},
methods: {
loadSpaces: function(project){
uniBuilderProjects.loadSpaces(project.id);
}
},
mounted: function () {
// Load Projects
uniBuilderProjects.loadProjects();
this.$devices = this.$resource('https://jsonplaceholder.typicode.com/posts{/id}/comments');
}
};
Fddle
you can use 'eager' prop in v-expansion-panel-content.
and set value true.
e.g <v-expansion-panel-content eager ></v-expansion-panel-content>
I messed with your fiddle and came up with this:
let Projects = {
template: `<v-expansion-panel >
<v-expansion-panel-content ripple v-for="project in filteredProjects "
:key="project.id" lazy><div slot="header"
#click="loadSpaces(project)">{{project.name}}</div>
<v-card>
<v-card-text v-if="loading == true" class="grey lighten-3" >
<v-btn flat block
v-for="space in spaces" :key="space.id"
#click="loadLayout(project)">{{space.id}}</v-btn>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>`,
components: {
Spaces,
},
props: {
searchFilter: String,
},
data: () => ({
data: uniBuilderProjects.state,
loading: false,
}),
computed: {
filteredProjects: function() {
var self = this;
return self.data.projects.filter(function(project) {
return (
project.name
.toUpperCase()
.indexOf(self.searchFilter.toUpperCase()) !== -1
);
});
},
spaces: function() {
return this.data.spaces;
},
},
methods: {
loadSpaces: function(project) {
this.loading = false;
console.log(this.loading);
uniBuilderProjects.loadSpaces(project.id);
this.loading = true;
},
},
mounted: function() {
// Load Projects
uniBuilderProjects.loadProjects();
this.$devices = this.$resource(
'https://jsonplaceholder.typicode.com/posts{/id}/comments',
);
},
};
So I used conditional rendering and whenever the function is complete set the this.loading to true and boom. Not sure if it's the best way but seems to be a quick solution.
I want to generate checkbox using v-for and use v-model. But i am having difficult time trying the get the value of checkbox. Here is what i am doing. My view looks like this:
<div class="checkbox" v-for="role in userRole">
<label>
<input v-model="newUser.urole" type="checkbox"
value="#{{role.roName}}">#{{role.roName}}</label>
</div>
Here is my Vue Js:
var emailRe = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*#([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i
var vm = new Vue({
el: '#userMgt',
data: {
newUser:{
fname: '',
mname: '',
lname: '',
email: '',
username: '',
password: '',
conpassword: '',
utype: '',
urole:''
},
},
methods: {
fetchUser: function () {
this.$http.get('../api/users', function (data) {
this.$set('users', data)
});
},
fetchUserType: function () {
this.$http.get('../api/usertype', function (data) {
this.$set('userType', data);
});
},
fetchUserRole: function () {
this.$http.get('../api/role', function (data) {
this.$set('userRole', data);
});
},
AddNewUser: function(){
//user input
var user = this.newUser;
alert(user.urole) ///not alerting right info
//clear form input
this.newUser = {fname:'',mname:'',lname:'',email:'',username:'',password:'',conpassword:'',utype:'',urole:''};
this.$http.post('../api/users', user);
;
},
selectAll: function(){
}
},
computed: {
},
ready: function () {
this.fetchUser();
this.fetchUserType();
this.fetchUserRole();
}
});
I am not able to get the selected value in newUser.urole and more over all my checkbox gets selected when i click one. How can i do this?. Thanks