UPDATE:
This is a bug and I have raised it as an issue on github. TBH, the component is not really ready for mainstream use yet.
My vuejs-datepicker will not accept a dd/mm/yy format if the day is 13 or greater. Presumably this is because it is interpreting the first two digits to be the month, and therefore rejects anything greater than 12.
The calendar pops up. You can select a date, and it shows in the input field. However, as soon as the field loses focus, it is cleared.
I have tried using both a static string as the value of format, and a function. Below is the function version.
HTML:
<div id="respond_by">
<date-picker name="respond_by"></date-picker>
</div>
Script at foot of page:
<script>
$(function () {
new Vue({ el: "#respond_by" });
});
</script>
My single file component:
<template>
<vue-date-picker placeholder="dd/mm/yy"
input-class="form-control"
:name="name"
:format="customDateFormat"
monday-first
typeable></vue-date-picker>
</template>
<script>
import moment from 'moment';
import DatePicker from 'vuejs-datepicker';
export default {
props : [
'name'
],
components: {
'vue-date-picker' : DatePicker
},
methods: {
customDateFormat(date) {
return moment(date).format('DD/MM/YY');
}
}
}
</script>
Globally registering the component:
import DatePicker from './date-time/date-picker.vue';
Vue.component('date-picker', DatePicker);
I have tested both Firefox and Chrome, with the same result.
I have tested the vuejs-datepicker code sand box and it works fine there, https://codesandbox.io/s/mpklq49wp. I tested it by adding the following line to the list of options in the formatting example:
<option value="dd/MM/yy">dd/MM/yy - e.g 13/11/18</option>
Related
I'm new to vue and I downloaded this Pomodoro timer component for my app (https://github.com/P3trur0/vuemodoro) which works well, except the time isn't adjustable inside the app itself.
Im trying to make an input field where the number of minutes will be entered and passed to the pomodoro timer, using the built in "minutes" property, but I don't understand how or if it's possible to pass variables to component properties in this way.
'''
<div>
<b-field class="timer">
<b-numberinput v-model="number"></b-numberinput>
</b-field>
<Pomodoro :minutes="1"/>
</div>
'''
Okay, so it seems that the Pomodoro component does not support reactive properties, so, while the timer will correctly be set to the initial value of number, it will not update if number changes. But - don't worry - there's an easy way around this: setting a key to the timer:
<Pomodoro :key="number" :minutes="number" />
A key tells Vue to update the component when the key has changed, so, in this case, whenever number changes, the Pomodoro element will be updated. More info on keys here.
Without a key:
With a key:
This is the full code:
<template>
<div id="app">
<b-field class="timer">
<b-numberinput v-model="number"></b-numberinput>
</b-field>
<Pomodoro :key="number" :minutes="number" />
</div>
</template>
<script>
import Pomodoro from "vuemodoro";
export default {
name: "App",
data() {
return {
number: 0,
};
},
components: {
Pomodoro,
},
// rest of the component
};
</script>
Also, you can try out this demo, and view/edit the code behind it
I am trying to build a dropdown using vue-multiselect, where I am facing an issue. Upon selecting the first option, it works fine. However, when I try to select another option, the earlier selected option also disappears. Given below is the code which I am using:
<template>
<div>
<app-header></app-header>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options.campaign_name" :multiple="true" :taggable="true" #tag="addTag1" style="width:200px"></multiselect>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import Multiselect from 'vue-multiselect'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'multiselect': Multiselect
},
data() {
return {
value: [
{ name: 'chess', code: 'js' }
],
options:{
campaign_name:[{name:"Chess", code:"js"},{name: "Badminton",code:"js"}],
vmw_platform_test:[],
release_version:[]
},
}
},
methods: {
addTag1 (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.campaign_name.push(tag)
this.value.campaign_name.push(tag)
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
</style>
I guess it must have something to do with the way I am passing the data, but this is actually how I need data to be passed, in order to learn the behavior of a bigger project. Any help is appreciated.
EDIT 1: Upon selecting one component, I am not getting the option to add more options. Instead I am getting the option of only removing it, on all the options.
In your example, you have two options with same code value, and you have set the code property to be tracked as the key that will be pushed into the value array of selected options. Try changing this:
campaign_name:[{name:"Chess", code:"chess"},{name: "Badminton",code:"badminton"}],
As per the docs (https://vue-multiselect.js.org/):
track-by is used to identify the option within the options list thus it’s value has to be unique. In this example the name property is unique across all options, so it can be used as track-by value.
I have a Vue component that lists a bunch of clickable tags. When you click on a tag, it takes you to another page with a list of objects containing that tag.
The relevant parts of the component code are:
<template>
<div>
<h2>All Tags</h2>
<TagList v-bind:tags="tags"/>
</div>
</template>
...
<script>
import TagList from './TagList'
export default {
name: 'AllTags',
components: {
TagList
},
data () {
return {
tags: []
}
},
mounted () {
tags = // array loaded from a database
}
}
</script>
This all works fine when I initially view the page. However if I browse away from this list, e.g. by clicking on a single tag, and then browse back, I only see the <h2>All Tags</h2> header. Using the Vue debugger in the browser, I can see that the data are still there.
I'm using <router-view :key="$route.fullPath"> to control the overall app and suspect the problem lies with the keys somehow.
Can someone point me in the right direction here? How can I get the TagList component to render every time I visit that page of the app?
EDIT: Here's the code of the TagList component:
<template>
<div class="tags">
<Tag v-for="tag in tags" v-bind:tag="tag" v-bind:key="tag" />
</div>
</template>
<script>
import Tag from './Tag'
export default {
name: 'TagList',
props: ['tags'],
components: {
Tag
}
}
</script>
You can try removing v-bind all thought its not required to use, I've checked your code it seems to work fine after visiting a tag and going back, all tags are still rendered. You can take a look at this working sample .
https://codesandbox.io/s/vue-template-3tcs4?fontsize=14
I have the following template syntax in a Vue single-file component:
<template>
...
<input v-model="newInput">
...
</template>
In the same component, I have this data:
<script>
...
data: () => {
return {
newInput: "",
}
}
...
</script>
Problem: In Chrome, this input field will not accept any text or numbers. The cursor is blinking in the field, but no text is entering. I opened dev tools, and there is no data change when I type. I checked my keyboard settings, nothing weird there.
Appreciate any guidance on this!
In my case this work perfectly,
Here in template tag I've modified input and in the script tag I've modified 'data()' method which accept any text or number.
Try this:
<template>
<input type="text" v-model="newInput">
</template>
<script>
export default {
data () {
return {
newInput: ''
}
}
}
</script>
I'm facing some problems with AG-Grid 20.2.0 enterprise and a custom editor, using Vue 2.6.0 and Vuetify 1.5.9.
The very simple editor component is this one:
<template>
<v-combobox v-model="value" :items="items" hide-details single-line flat solo></v-combobox>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'kus-test',
data() {
return {
items: [],
value: ''
}
},
methods: {
getValue() {
return this.value
}
}
})
</script>
With AG-Grid 20.1.0, when I write "something" and press enter, the string is saved, the editor closes and I see "something" in the cell.
With AG-Grid 20.2.0, when I press enter, the editor closes and nothing is saved, I see an empty cell andno error arises in the console.
With a slightly more complex editor component, I saw that all $refs were set to undefined.
I don't know if it's a bug, but it's definitely something with AG-Grid, since my other dependencies stay the same and work well with 20.1.0.
Do you have an idea?
Thanks
Since version 22.1.0, and with vuetify 2, this is no longer a problem.