I have two files: total.vue and completeness.vue. I would visualize the chart from total.vue into completeness.vue which will be my admin dashboard where I'll put 2 or 3 others charts.
From total.vue I'm going to export my stuff
<script>
import Chart from 'chart.js';
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'total_chart',
mounted() {
var chart_total = this.$refs.chart_total;
const ctx = chart_total.getContext("2d");
const myChart = new Chart(ctx, {
type: 'bar',
...
...
...
</script>
In completeness.vue I'm going then to import like this:
<template>
<div id="total_chart">
<div id="content">
<canvas ref="chart_total"></canvas>
</div>
</div>
</template>
<script>
import chart_total from '#/components/total'
export default {
components: {
chart_total
}
}
</script>
NO result pointing to the route which I have assigned to completeness.vue.
Suggestions?
Thanks for your time
Your code is not actually rendering the component. This is how you should do it:
<template>
<total-chart>
</total-chart>
</template>
<script>
import TotalChart from '#/components/total'
export default {
components: {
TotalChart
}
}
</script>
And then your total-chart component:
<template>
<div id="content">
<canvas ref="chart_total"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'total-chart',
mounted() {
var chart_total = this.$refs.chart_total;
const ctx = chart_total.getContext("2d");
const myChart = new Chart(ctx, {
type: 'bar',
...
...
...
</script>
And just an fyi - you might want to read up on naming components: https://v2.vuejs.org/v2/guide/components-registration.html
Related
So I'm starting out with Vue JSONForms and I'm trying to create a bare-bones custom text renderer. I know there JSONForms has the vue-vanilla package, but I want to understand what are the basics needed for a custom renderer because later on I will need to do much more customization to each custom renderer I create. Here is what I have so far:
<template>
<v-input />
</template>
<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl } from '#jsonforms/core'
import { useJsonFormsControl, RendererProps } from '#jsonforms/vue'
import { defineComponent } from 'vue'
const renderersText = defineComponent({
name: 'renderers-text',
setup (props: RendererProps<ControlElement>) {
return useJsonFormsControl(props)
},
})
export default renderersText
export const entry: JsonFormsRendererRegistryEntry = {
renderer: renderersText,
tester: rankWith(1, isStringControl),
}
</script>
But I'm getting a r.tester is not a function error. Any idea what this means and/or what I need to fix? Thanks in advance!
I have following project structure (index.vue):
<template>
<div class="container">
<navbar></navbar>
<social-media-bar></social-media-bar>
<main>
<home></home>
<news></news>
<vision></vision>
<event-section></event-section>
<artwork></artwork>
<about></about>
<donate></donate>
<contact></contact>
<partners></partners>
</main>
<footer-component></footer-component>
</div>
</template>
I want to change the app-language from inside navbar.vue:
<template>
<div class="nav-bar">
<fa class="icon-locale" #click="toggleLocale" :icon="[ 'fa', 'language' ]" size="2x"></fa>
<div class="locale-menu" :class="{ locale__open: isActiveLocale }">
<p #click="toggleLocale(); setLocale('en');">en</p>
<p #click="toggleLocale(); setLocale('de');">de</p>
<p #click="toggleLocale(); setLocale('ar');">ar</p>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {createI18n} from 'vue-i18n';
const isActiveLocale = ref(false);
const toggleLocale = () => {
isActiveLocale.value = !isActiveLocale.value;
}
const i18n = createI18n({});
const setLocale = (locale) => {
i18n.global.locale = locale
};
</script>
Basically this opens a locale menu with en, de, ar locales which start an #click event that changes i18n.global.locale accordingly.
I need to set the newly set i18n.global.locale in the home component.
home.vue:
<template>
<section id="home" class="home">
<h2>{{ state.heading[state.locale] }}</h2>
</section>
</template>
<script setup>
import {reactive} from 'vue';
import {useI18n} from 'vue-i18n';
const {locale} = useI18n()
const loc = locale.value.substring(0, 2)
const state = reactive({
locale: loc
})
</script>
What I want is to get the newly set i18n.global.locale from navbar.vue into state.locale in home.vue reactively. Since navbar and home are no parent/child, do I have to build an EventBus for this or is there a more elegant solution, maybe with the i18n library?
Edit:
This is the function, that is supposed to change locale globally but it only sets it inside i18n and it looks like the only reactivity possible with that is with i18n's messages, which I am not using.
const setLocale = () => {
i18n.global.locale = 'de'
console.log(i18n.global.locale);
};
I need to change the locale string globally, so that I can use it in all components reactively.
i18n.js
import { createI18n } from "vue-i18n";
export const i18n = createI18n({
locale: "en",
messages: {
en: {
message: {
language: "Language",
hello: "hello world!"
}
},
ja: {
message: {
language: "言語",
hello: "こんにちは、世界！"
}
}
}
});
main.js
import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./i18n";
createApp(App).use(i18n).mount("#app");
App.vue
<template>
<button #click="switch">switch to ja</button>
<p>{{ $t("message.hello") }}</p>
</template>
<script>
export default {
name: "App",
methods: {
switch() {
// $i18n is reactively
this.$i18n.locale = "ja";
},
},
};
</script>
I found a super easy way to pass around variables between components in vue with sessionStorage. Just define:
sessionStorage.whatever = 'whateverYouWant'
and you can use sessionStorage.whatever in all your components. Other than localStorage, sessionStorage will reset, when the browser/tab is closed.
I am using it to pass around the selected locale.
I tried to use prueba.js in one of the components of my app (InputSwap.vue), in which there is a button ('console.log'). I want to use this file using that button, but the app showed me this error:
enter image description here
prueba.js let me see the data in the console by clicking the button.
The data was saved with window.localStorage:
window.localStorage.setItem('data_input', JSON.stringify(data));
where am I wrong?
prueba.js :
export default {
infoPrueba() {
var data = (JSON.parse(window.localStorage.getItem('data_input')))
console.log(data)
}
}
InputSwap.vue:
<template>
<div class="card-action">
<Button v-on:click="prueba()"
v-bind:style="{'margin-left' : '5px', background : '#52368c'}"
btext="Console.log" icon="code"
/>
</div>
</template>
<script>
import Button from './Button'
import * as prueba from './prueba.js' // I have prueba.js in components folder
export default {
name: 'InputSwap',
components: {Button},
methods: {
prueba: async function () {
prueba.infoPrueba()
},
},
}
</script>
Thanks to x-rw, I solved this problem:
I changed import * as prueba from './prueba.js' to import {infoPueba} from './prueba.js'
and I wrote this code in prueba.js:
export const infoPrueba = () => {
var data = (JSON.parse(window.localStorage.getItem('data_input')))
console.log(data)
}
I want a review button on image, but I don't find attribute.
I set the imagePreviewMarkupShow = true but it didn't work.
Package here
My Template
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
max-files="4"
label-idle="Drop files here..."
:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
:files="myFiles"
v-on:init="handleFilePondInit"
allowImagePreview ="false"
/>
</div>
</template>
My Script
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';
// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageOverlay);
export default {
name: 'app',
data: function() {
return { myFiles: [] };
},
methods: {
handleFilePondInit: function() {
console.log('FilePond has initialized');
// this.$refs.pond.getFiles();
// FilePond instance methods are available on `this.$refs.pond`
}
},
components: {
FilePond
}
};
How do I add that button?
I was also struggling with this problem.
The solution is to import CSS.
import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'
This is not mentioned in Github.
I'm working in Laravel. What I want to do is to get the posts from the server and show them in view, however before that I wanted to set static array containing sample posts but my problem is that I can't access posts variable in app.js file when passing by data(){...} and receiving by props: ['posts']. When I even console.log(this.posts) in app.js file it returns undefined. I'm confused what the problem is:
My resources/js/app.js file:
window.Vue = require('vue');
window.App = require('./App.vue');
window.addEventListener('load', function ()
{
const app = new Vue({
el: '#app',
render: h => h(App)
});
});
My resources/js/App.vue file:
<template>
<div>
<app-head></app-head>
<app-post v-for="post in posts" :key="post.id"></app-post>
<app-foot></app-foot>
</div>
</template>
<script>
import Head from './components/Head.vue';
import Foot from './components/Foot.vue';
import Post from './components/Post.vue';
export default {
props: ['posts'],
components: {
'app-head': Head,
'app-post': Post,
'app-foot': Foot,
}
}
</script>
My resources/js/components/Post.vue file:
<template>
<div class="post">
// The post content...
</div>
</template>
<script>
export default {
data() {
return {
posts: [
{id: 1, title: 'Hello :)'}
]
}
}
}
</script>
Few alterations are required.
App.vue
<template>
<div>
<app-head></app-head>
<app-post :posts="posts"></app-post>
<app-foot></app-foot>
</div>
</template>
<script>
import Head from './components/Head.vue';
import Foot from './components/Foot.vue';
import Post from './components/Post.vue';
export default {
components: {
'app-head': Head,
'app-post': Post,
'app-foot': Foot,
},
data() {
return {
posts: [
{id: 1, title: 'Hello :)'}
]
}
}
}
</script>
If you need to prop the posts list to the component then it has to come from here. Hence, notice data is modified (or inserted).
Post.vue
<template>
<div class="post" v-for="post in posts" :key="post.id">
// The post content...
</div>
</template>
<script>
export default {
props: ['posts']
}
</script>
Notice that v-for should be in the post component.
Let me know if that works for you.
You should use props in your component(Post) the receive the data from parent component(App).