I'm trying to upgrade from the old slot-scope syntax to the relatively new v-slot syntax but it doesn't seem to work.
Steps to reproduce the behavior:
Go to the Form.vue file in this codesandbox
To see it working using the old slot-scope syntax, just let the app compile and use the login form (enter some text in both the fields)
Uncomment lines 5, 18, 23, and 36 and comment lines 6, 19, 24, and 37
Use the login form again. The inputs disappear as soon as you start typing.
What am I doing wrong?
your render function in FormGroup.vue returns more than one VNode. Try that:
render(createElement) {
return createElement(
"div",
this.$scopedSlots.default({
errors: this.errors,
invalid: this.invalid,
})
);
}
Related
I tried Keys and rightClick() option.
Was getting ReferenceError: Key is not defined error with await browser.keys([Key.shift,'F10'])
and, seeing error TypeError: elem[prop] is not a function with ** await this.pivotItem.rightClick()**
Can someone help ?
to perform right click, use await elementLocator.click({ button: 'right' })
you can also pass the number for key like [0, "left", 1, "middle", 2, "right"]
Here you can find the link for more details:
https://webdriver.io/docs/api/element/click/
On setting colors from configuration and using Gooddata UI Charts component it is throwing following error
TypeError: item.predicate is not a function
My config is as follows, On reseting default color it is working fine but as change color i get the colorMapping object in the api and after applying this config throwing the error.
How can i resolve it, Please help me out.
config={{
colorMapping: [{
color: { type: "guid", value: "17" },
id:"0d447449c2844b228923c37de7b6aaf9"
}]
}}
usage of ColorMapping is described in documentation
https://sdk.gooddata.com/gooddata-ui/docs/chart_config.html#Color-mapping
You need to define predicate function which when returning true, will apply corresponding color (https://sdk.gooddata.com/gooddata-ui/docs/ht_create_predicates.html).
In your case localId predicate seems to be right for you
https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui/src/base/headerMatching/HeaderPredicateFactory.ts#L264
In case you are using older version of Gooddata UI.SDK than v8, you need to implement predicate by your own. Something like this (or equivalent for measures).
predicate: headerItem =>
headerItem.attributeHeaderItem &&
headerItem.attributeHeaderItem.localIdentifier === "0d447449c2844b228923c37de7b6aaf9", // find attribute item by localIdentifier
You can switch the official documentation to whathever version of Gooddata UI.SDK lib you are using and read the same article about ColorMapping
https://sdk.gooddata.com/gooddata-ui/docs/7.9.0/chart_config.html#color-mapping
I am using Bootstrap Vue and more specifally the formdatepicker.
It's looking like this:
<b-form-datepicker
v-model="user.birthdate"
class="mb-2"
:max="maxBirthdate"
:placeholder="$t('birthdate_field_placeholder')"
:show-decade-nav="true"
/>
I want to restrict the max date to be 16 years ago from today.
So I use this code:
created () {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let todayMinusSixteenYears = new Date(today)
todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)
this.maxBirthdate = todayMinusSixteenYears
},
When I then start my Nuxt app, I am getting the following error:
[Vue warn]: Invalid prop: type check failed for prop "max". Expected String, Date, got Date
found in
---> <BCalendar>
<BVFormBtnLabelControl>
<BFormDatepicker>
<Anonymous>
<BFormGroup>
<FormControlWrapper> at components/form/FormControlWrapper.vue
<ValidationObserver>
<Pages/register/volunteer.vue> at pages/register/volunteer.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
I'm not sure where or what the error is, since the variable is definitely a Javascript Date.
When trying to put .toString() at the end, it does not work at all anymore.
Please note, that even though the application is giving the error as shown, it does work perfectly with the Javascript Date object.
Without the full script (especially the data object) I can't say what is the root of your issue here, but going off of the Bootstrap Vue demo, the code below works. What you're likely experiencing is a conflict between created function and whatever you have in data
<script>
export default {
data() {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let todayMinusSixteenYears = new Date(today)
todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)
return {
value: '',
maxBirthdate: todayMinusSixteenYears,
}
}
}
</script>
I'm getting this error: "TypeError: Event.$emit is not a function" whenever the watcher fires.
I can console log the Event object since I imported it in my main.js file.
I use a named prop because I have 3 different client tables on 1 page. I named the table as rmTable
<v-client-table name="rmTable" :data="filteredRMInvData" :columns="rmColumns" :options="rmOptions" v-if="rmInventoryData.length">
In my watcher:
materialType(value) {
Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
This is my customFilters in my rmOptions variable:
customFilters: [{
name: 'materialtype',
callback(row, query) {
console.log(row)
console.log(query)
return query.code.includes(row.material_group)
}
}],
How can I do this correctly? At least I should be able to see the row and query logs. I checked the guide on the github page and it seems I followed it correctly.
Assuming you have
Vue.use(VueTables.Event);
Then
materialType(value) {
VueTables.Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
Event is already a browser interface, which I'm guess is the reason it doesn't work.
I am rendering a bunch of HTML divs (I've named them cells) based on Vue data.
The colour of the cell is dictated by a hex code in the data.
On mouse over, a function should run to change the colour of the particular cell.
Here is how the data looks and how the function works at the moment:
new Vue({
el: '#app',
data: {
cells: [
{i: 1, hex: '#111111'},
{i: 2, hex: '#222222'},
{i: 3, hex: '#ffffff'}
]
},
methods: {
mouseOver: function (e){
this.cells[e.toElement.id].hex = (Math.floor(Math.random() * 16777215)).toString(16);
}
}
})
And here is the code for the v-for which renders the (in this case) 3 cells:
<div class='cell'
v-for="cell in cells"
:id="cell.i"
:key="cell.i"
:style="{ backgroundColor: cell.hex}"
#mouseenter="mouseOver">
</div>
However this does not work.
[Vue warn]: You may have an infinite update loop in a component render function.
(found in <Root>)
I theorise that this is because Vue re-renders all of the cells every time the data changes, and since the component is new, the function runs again.
However I'm new to Vue and not sure how to go about solving this!
Help much appreciated!
You forgot to add # at the beginning of your hex color code and you forgot to decrease the index for accessing the array by one.
Furthermore, e.toElement seems to be unsupported by some browsers. Rather use e.target
What is the difference between Event.target, Event.toElement and Event.srcElement?
this.cells[e.target.id-1].hex = '#' + (Math.floor(Math.random() * 16777215)).toString(16);
Working fiddle: https://jsfiddle.net/TobiObeck/qfpkvn9L/1/