Quasar2 Vue3 q-popup-edit #save event never called - events

I have the following template:
<template>
<q-item tag="label" v-ripple>
<q-popup-edit
v-model="editedModel"
#before-show="onFieldClick"
#save="setValue"
:cover="false"
fit
buttons
>
<template v-slot:title>
<div class="text-mono">{{ name }}</div>
</template>
<q-select
dense
autofocus
emit-value
v-model="editedModel"
multiple
:options="options"
counter
/>
</q-popup-edit>
<q-item-section>
<q-item-label class="text-mono">{{ name }}</q-item-label>
<q-item-label caption>{{ description }}</q-item-label>
<q-item-label caption>{{ model }}</q-item-label>
</q-item-section>
</q-item>
</template>
The #save method is never called. What do I miss? Thanks.

For me worked the following:
I added: v-slot="scope" to the q-popup-edit
<q-popup-edit v-model="initialValue" v-slot="scope" buttons #save="save">
and then I replaced my v-model inside q-input to this:
<q-input v-model="scope.value" >

Related

Quasar2 Vue3 QSelect end of the multiple selection trigger when it loses focus

I have the following template:
<template>
<q-item tag="label" v-ripple>
<q-select
borderless
stack-label
emit-value
map-options
multiple
class="full-width"
v-model="model"
:options="options"
:label="name"
#change="onValueChange"
/>
</q-item>
</template>
Since it is a multiple selection, I would like to be able to know when the selections complete which is usually when the QSelect loses focus or closed. This is so that I don't trigger any unnecessary action for every single change during the multi-selection by the user. The #change is not triggered at all.
Use slot:
<template>
<q-item tag="label" v-ripple>
<q-select
borderless
stack-label
emit-value
map-options
multiple
class="full-width"
v-model="model"
:options="options"
:label="name"
>
<template v-slot:after>
<q-btn
data-test="btnMultipleDropDownSetting"
round
dense
flat
color="primary"
icon="done"
#click="multiSelectionCompletes"
:disable="submitButtonDisable"
/>
</template>
</q-select>
</q-item>
</template>

AlpineJS: How to pass a x-for variable to an x-data function

could you please help?
I 'm trying to add a count down according to some property in a loop but I could not find any way (not by trying out nor by googling) how I could pass that value in my functions:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown()" x-init="init()">
<span x-text="timeLeft(item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>
I was trying to pass item.timerEnd to every functon (getCountdown, init and timeLeft) but I always get the error that item is undefined, wheras if I pass it eg. to
<span x-text="new Date(item.timerEnd).toLocaleString()"></span> this works.
What am I missing?
PS: Thanks fpr the first help here: How to make timer in alpine.js app with time interval
Do this $data.item.timerEnd.
Like this:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown($data.item.timerEnd)" x-init="init($data.item.timerEnd)">
<span x-text="timeLeft($data.item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>

Vue component template not render when used with #if in blade,php

I have created Vue template which works fine when it is not used inside #if , but it return black if used inside #if.
Here is my template
<template>
<div>
<usage-token-button :tokens="usageTokens" v-on:use-token="useComplimentaryToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
<usage-token-button :tokens="researchPasses" v-on:use-token="useResearchPassToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
</div>
</template>
and this is how it is called
#if(!isset($showdata))
<usage-token-access
doi="{{ $content->metaInfo()['content']->doi }}"
root="{{ config('app.subdir') ? config('app.subdir') : '/' }}">
</usage-token-access>
#endif
I have confirmed it is going inside if condition , and when I inspect it I can see blank div as show in screenshot

Button that shows modal for each b-table row

Im using laravel, vue, and bootstrap-vue.
I have created a vue component that displays a table of elements (subnets in this example).
For each of them I show a component (modal_edit-subnet) thats should open a modal that allows to edit the data of the element of the related row.
The problem is that it shows modals for all of the table elements. For example, if the table has 3 rows, it shows 3 modals (after closing one it shows the next). Each of the modals with the data of each of the rows.
I've tried to add "key"s but no success.
What am i doing wrong?
Thanks!
Component that shows the table
<template>
<div>
<b-card class="text-center">
<b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
<template slot="[ip_address]" slot-scope="data_subnets">
<b>{{ long2ip(data_subnets.item.ip_address) }}</b>
</template>
<template slot="[actions]" slot-scope="data_subnets">
v-on:deleteSubnet="deleteSubnet"></modal_delete-subnet>
<modal_edit-subnet :key="'modal_edit_subnet' + data_subnets.item.id" :subnet="data_subnets.item" v-on:editSubnet="editSubnet"></modal_edit-subnet>
</template>
</b-table>
</b-card>
</div>
</template>
Modal modal_edit-subnet
<template>
<div>
<b-button size="sm" v-b-modal.modal-edit-subnet>Edit</b-button>
<b-modal
id="modal-edit-subnet"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
The problem is that:
You're rendering a modal for each row of the table and;
Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.
How to fix it:
Use just one modal on the b-table level
Dynamically inject id into your modal_edit-subnet component:
<template>
<div>
<b-button size="sm" v-b-modal[id]>Edit</b-button>
<b-modal
:id="id"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
props: {
id: {
type: String | Number
}
}
}
</script>
Use v-model (this is the way I would do it)
<template>
<div>
<b-button size="sm" #click="show = true">Edit</b-button>
<b-modal
v-model="show"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>

Getting v-text-field value with xpath in Vuejs (with nightwatch)

VueJS markup:
<v-menu
lazy
:close-on-content-click="false"
v-model="modal"
transition="scale-transition"
offset-y
full-width
:nudge-right="40"
max-width="290px"
min-width="290px">
<v-text-field
slot="activator"
label="Issue Date"
v-model="date"
append-icon="event"
readonly
>
</v-text-field>
<v-date-picker v-model="date" no-title scrollable actions>
<template scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
HTML:
`<div class="menu__activator">
<div data-v-386ef34c="" class="input-group input-group--dirty input-group--append-icon input-group--text-field">
<label>Issue Date</label>
<div class="input-group__input">
<input readonly="readonly" tabindex="0" aria-label="Issue Date" type="text">
<i aria-hidden="true" class="material-icons icon input-group__append-icon input-group__icon-cb">event</i>
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
</div>`
How it appears in browser:
I'd like to write e2e to assert some logic with the calendar date. Date is produced with moment to match current day. However I cannot figure out how to access that text value with xpath.
Xpath to get the element:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]')
How the element appears in developer console:
With the attribute I need at the very bottom:
Xpaths I've tried which result in empty array:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]//#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]/#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly][0]//#value')
Edit:
Managed to get the value in chrome console:
$x('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]')[0].value
But still struggling with Nightwatch
Any solutions with xpath or css are welcome! Thanks!
Had to import chai, but this finally worked:
.getValue('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]', function(result) {
expect(result.value).to.equal('2017-10-17')
})

Resources