So I'm trying to dynamically generate a paper-dropdown-menu populated from an AJAX data source, which is working great using the code below:
<polymer-element name="my-element" attributes="selected">
<template>
<core-ajax auto url="/api/items/" response="{{items}}" handleAs="json"></core-ajax>
<paper-dropdown-menu selected="{{selected}}">
<template repeat="{{items}}">
<paper-item name="{{id}}" label="{{name}}"></paper-item>
</template>
</paper-dropdown-menu>
</template>
But if I set the initial selected item to be either the value of the published attribute, or a value that I set in the 'ready' callback, the dropdown menu item does not get selected when the items are loaded:
<script>
Polymer({
publish: {
selected: null
}
});
</script>
</polymer-element>
I understand that this is happening because the 'selected' property is being set before the template in the dropdown gets bound, but my question is whether there is a way to either 1) defer the 'selected' property change until after the template is bound or 2) otherwise reliably set an initially selected value for the dropdown menu?
One option would be to not render the dropdown until the data is available.
ex: http://jsbin.com/piyogo/13/edit
<polymer-element name="foo-drop">
<template>
<core-ajax auto
url="http://www.json-generator.com/api/json/get/bJMeMASvTm?indent=2"
response="{{items}}"
handleas="json">
</core-ajax>
<template if="{{items}}">
<paper-dropdown-menu selected="{{selected}}">
<template repeat="{{item in items}}">
<paper-item label="{{item.name}}"></paper-item>
</template>
</paper-dropdown-menu>
</template>
</template>
<script>
Polymer({
publish: {
selected: null
}
});
</script>
</polymer-element>
<foo-drop selected="2"></foo-drop>
For Polymer 1.0 (and later), the same can be achieved with the following code:
<iron-ajax auto url={{url}} handle-as="json" last-response="{{items}}"></iron-ajax>
<template is="dom-if" if="{{items}}">
<paper-dropdown-menu-light label="[[label]]" no-animations selected-item="{{selected}}">
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="[[items]]">
<paper-item>[[item.name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu-light>
</template>
Related
I need to have a custom layout or remove default layout for my signIn page. Based on Nuxt3 docs you can set layout with definePageMeta({layout: "custom"}) or remove definePageMeta({layout: false}) however when I set it to false or "custom" I get a TypeError.
The definePageMeta does change the layout. However, there are instances where when you first load the signIn page it doesn't show anything and shows the TypeError above. Any advice on how to solve this issue is greatly appreciated!
Btw, I just recently started using nuxt3, never had this issue in nuxt2.
// sign in page
<template>
<div>
<NuxtLayout name="custom">
<v-row>Sign In Page</v-row>
</NuxtLayout>
</div>
</template>
<script lang="ts" setup>
definePageMeta({
layout: 'custom',
})
</script>
// layout custom.vue
<template>
<v-app>
<v-main>
<v-container fluid>
<slot />
</v-container>
</v-main>
</v-app>
</template>
To create layout in nuxt 3 you must add slot.
// custom layout
<template>
<div class="custom-layout">
<slot/>
</div>
</template>
and then in your page component add layout: 'custom' in definePageMeta in setup script.
<template>
// YOUR PAGE
</template>
<script setup lang="ts">
definePageMeta({
layout: "custom",
});
</script>
if you need app.vue you must add NuxtLayout to it
// app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
How do I pass a slot or a prop to a layout component in inertia?
For example, heres a ForgotPassword component:
<template>
<slot name="title">Forgot Password</slot>
Forgot pw stuff goes here...
</template>
<script>
import CardLayout from "#/Layouts/CardLayout";
export default {
layout: CardLayout,
}
Here is the CardLayout component:
<template>
<h1>{{ $slots.title }}</h1>
<slot/>
</template>
Nothing shows up inside the h1 tag...
Adding this here as the solution above does not work. You can pass data to the Layout component by setting a prop value
layout: (h, page) => h(Layout, { somePropDataDefinedInLayout: value }, () => page)
// CardLayout
<template>
<h1><slot name="title" /></h1>
<slot />
</template>
// ForgotPassword
<template>
<template #title>Forgot Password</template>
Forgot pw stuff goes here...
</template>
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>
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>