I try to localize QDate instance in my Quasar Vue.js application. But locale prop doesn't works.
<template lang="pug">
q-date.no-borders(today-btn :value="temp" #input="update" :locale="currentLocale")
</template>
<script>
export default {
name: "LocalQDate",
data() {
return {
temp: '',
currentLocale: {
days: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота_Воскресенье'.split('_'),
daysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_')
}
}
},
methods: {
update(newVal) {
this.temp = newVal;
}
}
}
</script>
Why QDate component doesn't see my locale settings? Manual says I am fully right. Maybe some error is here? QDate API manual
The problem was solved by updating quasar version
Related
Within my Something.vue:
<template>
<p>{{ codes }}</p>
</template>
export default {
data() {
return {
codes: 'test'
}
},
name: 'Functions',
props: {
msg: String
},
setup() {
this.codes = 'does it work?';
}
</script>
<style>
</style>
Why would I face this issue?
Uncaught TypeError: Cannot set property 'codes' of undefined
In vue3, you can defined variable like this:
import { ref } from "vue";
export default {
name: 'Functions',
props: {
msg: String
},
setup() {
let codes = ref('does it work?');
return { codes }
}
</script>
And you can use codes in your Vue component.
Because, in setup methods, you can not use this keywords. Its execution is earlier than other life cycle function
If you want to change codes, you can defined a function in setup or methods, like this:
setup() {
let codes = ref("does it work?");
function onChangeCodes() {
codes.value = "changed!";
}
return { codes, onChangeCodes };
}
Then, you can use this function in your template:
<template>
<div>{{ codes }}</div>
<button #click="onChangeCodes">change</button>
</template>
When setup is executed, the component instance has not been created yet,
In other words, You can't access 'codes' when setup() execute.
you can check the document here
I have started using ckeditor4-vue
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#using-the-component-locally
<template>
<div>
<ckeditor
v-model="formData"
:config="editorConfig"
#input="$emit('update:editorData', formData)"
></ckeditor>
</div>
</template>
<script>
import CKEditor from 'ckeditor4-vue';
export default {
components: {
ckeditor: CKEditor.component
},
props: ['editorData'],
data() {
return {
formData: this.editorData,
editorConfig: {}
};
},
mounted() {
CKEDITOR.disableAutoInline = true;
}
};
</script>
However I can't find how I can use CKEDITOR, in this example, I have CKEDITOR is not defined.
Thank you
make sure you're calling it the right way, CKEDITOR <> CKEditor.
try removing your mounted and this should works
I'm trying to watch page url. I don't use Vue Router.
My final goal is to set page url as input value:
<template>
<div>
<input v-model="pageUrl">
</div>
</template>
<script>
export default {
data() {
return {
pageUrl: window.location.href,
link: ''
}
},
watch: {
pageUrl: function() {
this.link = window.location.href
}
}
}
</script>
The example above doesn't work somewhy.
I've also tried
watch: {
'window.location.href': function() {
this.link = window.location.href
}
},
Input value is being set only once on component render.
What can be wrong?
well, that is exactly the reason you want to use vue-router!
vue can only detect changes in reactive properties: https://v2.vuejs.org/v2/guide/reactivity.html
if you want to react to changes in the url, you have 2 ways:
https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event or
https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
i would rather use vue-router or a similar plugin.
I want to add custom props to v-card-title component of vuetify.
But, I want to still use to call the vuetify component with my custom props, how can I do that?
I'm trying this, but doesn't succeed.
Example at codesandbox: https://codesandbox.io/s/71nr1w3qvq
<template>
<!-- How to add computed at VCardTitle? -->
</template>
<script>
import VCardTitle from "./somepath/VCardTitle";
export default {
name: "App",
props: ['variant'],
extends: VCardTitle,
computed: {
addVariant: function() {
if(this.variant === 'light') {
return 'light-theme'
}
return 'dark-theme'
}
}
};
</script>
<style>
</style>
You can use jsx like this
//App.js
export default {
name : 'App',
render(createElement){
return createElement(
'VCardTitle',
'My title'
)
}
}
//if you want more information go to this documentation:
//https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
Vue.js version: 2.4.2
Below component always print this.$listeners as undefined.
module.exports = {
template: `<h1>My Component</h1>`,
mounted() {
alert(this.$listeners);
}
}
I register the component and put it inside a parent component.
Can someone tell me why?
You have to understand what $listeners are.
this.$listeners will be populated once there are components that listen to events that your components is emitting.
let's assume 2 components:
child.vue - emits an event each time something is written to input field.
<template>
<input #input="emitEvent">
</input>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('important-event')
console.log(this.$listeners)
}
}
}
</script>
parent.vue - listen to the events from child component.
<template>
<div class="foo">
<child #important-event="doSomething"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data() {
return {
newcomment: {
post_id: 'this is default value'
}
}
},
components: { child },
methods: {
doSomething() {
// do something
}
}
}
</script>
With this setup, when you type something to the input field, this object should be written to the console:
{
`important-event`: function () { // some native vue.js code}
}
I added the following alias to my webpack.config.js file and this resolved the issue for me:-
resolve: {
alias: {
'vue$': path.resolve(__dirname, 'node_modules/vue/dist/vue.js')
}
},