I'm using a dom-repeat in Polymer. The corresponding list includes an initial value that should be set whenever the list of the dom-repeat is reset. However, when the first element of the list keeps the same initial value, the value is not reset even though I completely empty the list before resetting it to the new value. Here's my minimum example:
<dom-module id="console-app">
<template>
<div id="command-selection">
<paper-dropdown-menu id="command" label="Function">
<paper-listbox slot="dropdown-content" selected="{{_commandIndex}}">
<paper-item>A</paper-item>
<paper-item>B</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div id="parameters">
<template is="dom-repeat" items="[[_parameterData]]">
<parameter-block name="[[item.name]]" initial-value="[[item.initialValue]]" ></parameter-block>
</template>
</div>
</template>
<script>
class ConsoleApp extends Polymer.Element {
static get is() {
return 'console-app';
}
static get properties() {
return {
_commandIndex: {
type: Number,
value: -1,
observer: '_onIndexChange'
},
_parameterData: {
type: Array,
value: () => { return []; }
}
};
}
_onIndexChange() {
this.set('_parameterData', []);
switch (this._commandIndex) {
case 0:
this.set('_parameterData', [
{ name: 'AAA', initialValue: '111'},
{ name: 'BBB', initialValue: '123'}
]);
break;
case 1:
this.set('_parameterData', [
{ name: 'CCC', initialValue: '112'}
]);
break;
}
}
}
customElements.define(ConsoleApp.is, ConsoleApp);
</script>
</dom-module>
parameter-block:
<dom-module id="parameter-block">
<template>
<paper-input id="non-bool-value" label="[[name]]"
value="{{_value}}"></paper-input>
</template>
<script>
class ParameterBlock extends Polymer.Element {
static get is() {
return 'parameter-block';
}
static get properties() {
return {
_value: {
type: String,
value: () => { return ''; }
},
initialValue: {
type: String,
value: () => { return ''; },
observer: '_onInitialValueChange'
},
name: {
type: String,
value: () => { return ''; }
}
};
}
_onInitialValueChange() {
this.set('_value', this.initialValue);
}
}
customElements.define(ParameterBlock.is, ParameterBlock);
</script>
</dom-module>
When the index of the dropdown menu changes I reset _parameterData to [] and would assume that after that all future changes to _parameterData are evaluated as new elements. However, it seems like the list remembers the previous initial value after all as the corresponding listener is not called and previous changes to the first text element don't reset to 111 even though I'm changing the selection. If I use different initial values everything works fine, so I assume that I need to tell Polymer somehow to properly reset the elements, but how?
Since, you were only observing the initialValue the application will not know that the initialValue you were changing is for different name. That is why it is not resetting to default values you assigned.
You will need to observe both properties name and initialValue. So, change your observer code to :
static get observers() {
return [
'_onInitialValueChange(name, initialValue)'
]
}
and your method to:
_onInitialValueChange(name, initialValue) {
this.set('_value', this.initialValue);
}
I have updated the plnkr link provided.
Related
The source code:
import { LitElement, html, css } from '../vendor/lit-2.4.0/lit-all.min.js';
export class SearchInput extends LitElement {
static get properties() {
return {
src: { type: String },
items: { type: Array }
}
};
static styles = css`
`;
constructor() {
super();
this.items = [
{ text: 'Hola' },
{ text: 'mundo!' }
];
this.selectedItem = null;
this.text = 'foo';
}
selectItem(item) {
this.selectedItem = item;
this.text = this.selectedItem.text;
}
render() {
return html`
<div class="control">
<input class="input" type="text" value="${this.text}">
<ul class="result-list">
${this.items.map((item) => html`<li #click="${this.selectItem(item)}">${item.text}</li>`)}
</ul>
</div>
`;
}
}
customElements.define('search-input', SearchInput);
The text input (input type="text") value is not updating after changing property (this.text) using an event (this.selectItem) with LitElement library.
I tried it in browser but there is no error in browser console.
I expect that input value update after changing property with the event.
Thanks for the question! There are a few minor issues resulting in the value not updating.
One issue is that this.text is not a reactive property, so changing it isn't scheduling a re-render. Fix is to add text to the static properties.
The second issue is that your event listener click handler is the result of calling this.selectItems(item) and not a function, fixed with: #click=${() => this.selectItems(item)}.
Bonus: You may want to change the value attribute expression to a property expression using the live directive, .value="${live(this.text)}". I suggested this because the native input browser element always updates its contents if you update the value property, but only updates before a user has interacted with it when updating the value attribute. And the live directive is useful to tell Lit to dirty check the live DOM value in the input element.
Your code with the minor fixes: https://lit.dev/playground/#gist=a23dfbcdfbfcfb7de28b1f7255aaa8ee
or running in StackOverflow:
<script type="module">
import { LitElement, html, live } from 'https://cdn.jsdelivr.net/gh/lit/dist#2/all/lit-all.min.js';
class SearchInput extends LitElement {
static get properties() {
return {
src: { type: String },
items: { type: Array },
text: { type: String }, // <- Added this to make `this.text` a reactive property.
}
};
constructor() {
super();
this.items = [
{ text: 'Hola' },
{ text: 'mundo!' },
{ text: 'click these' },
];
this.selectedItem = null;
this.text = 'foo';
}
selectItem(item) {
this.selectedItem = item;
this.text = this.selectedItem.text;
}
render() {
return html`
<div class="control">
<!-- live directive is needed because user can edit the value of the input.
This tells Lit to dirty check against the live DOM value. -->
<input class="input" type="text" .value="${live(this.text)}">
<ul class="result-list">
<!-- Click event is a function -->
${this.items.map((item) =>
html`<li #click="${() => this.selectItem(item)}">${item.text}</li>`)}
</ul>
</div>
`;
}
}
customElements.define('search-input', SearchInput);
</script>
<search-input></search-input>
I'm working with Vue3 and Bootstrap 5.
MY PROBLEM: I want to click a button in my parent.vue. And after clicking this I want to have the data from my child.vue inside of the method in my parent.vue - method .
But my data is always empty, except I need another ```setTimeout"-function. But actually I don't want to use it.
I think there is a better solution for the props Boolean as well..
If there are any question left regarding my problem, please ask me!
Thanks for trying helping me out!
PARENT:
<template>
<Child :triggerFunc="triggerFunc" #childData="childData"/>
<button type="button" class="btn btn-success" #click="get_data()">Get Data</button>
</template>
<script>
export default {
data() {
return {
triggerFunc: false,
c_data: [],
}
},
methods: {
childData(data) {
this.c_data = data;
},
get_data() {
this.triggerFunc = true;
setTimeout(() => {
this.triggerFunc = false;
}, 50);
console.log(this.c_data);
//HERE I WANT TO USE "C_DATA" BUT OF COURSE IT's EMPTY. WITH ANOTHER SET_TIMEOUT IT WOULD WORK
//BUT I DON'T WANT TO USE IT. BUT WITHOUT IT'S EMPTY.
//LIKE THIS IT WOULD WORK BUT I DON'T WANT IT LIKE THAT
setTimeout(() => {
console.log(this.c_data);
}, 50);
}
},
}
</script>
CHILD:
<template>
<!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
</template>
<script>
export default {
data() {
return {
input1: "",
input2: "",
}
},
props: {
triggerFunc: Boolean,
},
triggerFunc(triggerFunc) {
if(triggerFunc == true) {
this.save_data()
}
}
methods: {
save_data() {
var data = [
{
Input1: this.input1,
Input2: this.input2
},
]
this.$emit("childData", data);
},
},
}
</script>
Parent can very well hold/own the data of it's children. In that case, the children only render/display the data. Children need to send events up to the parent to update that data. (Here parent is the Key component and child is a Helper for the parent.)
So, here parent always has the master copy of the child's data in its own data variables.
Also, you are using # for binding properties, which is wrong. # is for event binding. For data binding use ':' which is a shorthand for v-bind:
You can just say :childData=c_data
PS: You seem to be getting few of the basics wrong. Vue is reactive and automatically binds the data to the variables. So, you don't have to do this much work. Please look at some basic Vue examples.
Refer: https://sky790312.medium.com/about-vue-2-parent-to-child-props-af3b5bb59829
Edited code:
PARENT:
<template>
<Child #saveClick="saveChildData" :childData="c_data" />
</template>
<script>
export default {
data() {
return {
c_data: [{Input1:"", Input2:""}]
}
},
methods: {
saveChildData(incomingData) {
//Either set the new value, or copy all elements.
this.c_data = incomingData;
}
},
}
</script>
CHILD:
<template>
<!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
<!-- Vue will sync data to input1, input2. On button click we can send data to parent. -->
<button #click.prevent="sendData" />
</template>
<script>
export default {
props:['childData'],
data() {
return {
input1: "",
input2: "",
}
},
methods: {
sendData() {
var data = [
{
Input1: this.input1,
Input2: this.input2
},
]
this.$emit("saveClick", data); //Event is "saveClick" event.
},
},
beforeMount(){
//Make a local copy
this.input1 = this.childData[0].Input1;
this.input2 = this.childData[0].Input2;
}
}
</script>
I am trying to build a component that creates filter buttons and then sends the type attribute in the filters object through the event bus to be handled elsewhere in my app. However, when I added the array of objects (filters) in the data section, I am getting an error of this.filter is not defined when I click on a button.
I would like to keep the filters array in this component because I am also trying to dynamically change the active class to whichever button has been clicked.
Am I missing something that has to do with props? Why am I unable to display the buttons when the data and v-for was on another component? These were the questions I have been asking myself in order of solving this issue.
<template>
<div>
<button
v-for="(filter, index) in filters"
:key="index"
:class="{ active: index === activeItem }"
#click="emitFilter(), selectItem(index)"
:filter="filter"
>
{{ filter.name }}
</button>
</div>
</template>
<script>
import EventBus from '#/components/EventBus'
export default {
props: {
filter: { type: String }
},
data() {
return {
activeItem: 0,
filterResult: '',
filters: [
{ name: 'All', type: 'all' },
{ name: 'Holidays', type: 'holiday' },
{ name: 'Seasons', type: 'season' },
{ name: 'Events', type: 'custom' }
]
}
},
methods: {
emitFilter() {
this.filterResult = this.filter
EventBus.$emit('filter-catagories', this.filterResult)
},
selectItem(index) {
this.activeItem = index
}
}
}
</script>
My button component is used in a filters component
<template>
<div>
<span>filters</span>
<FilterBtn />
</div>
</div>
</template>
<script>
import FilterBtn from '#/components/FilterBtn'
export default {
components: {
FilterBtn
}
// data() {
// return {
// filters: [
// { name: 'All', type: 'all' },
// { name: 'Holidays', type: 'holiday' },
// { name: 'Seasons', type: 'season' },
// { name: 'Events', type: 'custom' }
// ]
// }
// }
}
</script>
As you can see, the commented section is where I had my filters originally, but I had to move them to the button component in order to add the active class.
I'm assuming you were actually trying to access the filter iterator of v-for="(filter, index) in filters" from within emitFilter(). For this to work, you'd need to pass the filter itself in your #click binding:
<button v-for="(filter, index) in filters"
#click="emitFilter(filter)">
Then, your handler could use the argument directly:
export default {
methods: {
emitFilter(filter) {
this.filterResult = filter
//...
}
}
}
You are passing a prop called filter typed string to your component. When you output {{ filter.name }} you are actually referring to this property instead of the variable filter you create within the v-for loop.
Unless you passed a property called "filter" to your component, this property will be undefined. Therefore outputting filter.name will result in this error message.
Yea you dont pass an prop to your component thats why its undefined.
<FilterBtn filter="test" />
Here i pass an prop named filter with the value of test.
Sure you could pass dynamic props. Just bind it.
<FilterBtn :filter="yourData" />
I need to ask: Are you passing an object or an string?
Because you defined your prop to be a string, but you actually use it as an object
{{ filter.name }}
Maybe you should also set the type to Object.
props: {
filter: { type: Object }
},
I've stumbled upon this situation where I want to pass a prop to a child component that will be the default value of the component, but it will only be showed when the initial value is empty.
Parent Component:
<multi-line-input v-model="data.something" placeholder="Enter Something" :default="data.something"/>
Child Component
props: {
value: {
type: String,
default: ''
},
default: {
type: String,
default: ''
},
},
methods: {
emitBlur (e) {
if (!this.value && this.default) {
this.value = this.default
}
this.$emit('blur')
},
emitInput () {
this.$emit('input', this.$el.value)
}
}
So what I am trying to achieve basically, is when the component loads will get the value from v-model it will also receive a default value that shouldn't change, and only used as a value when the actual value is empty on blur
The default will have the initial value of data.something and it should not change!
I tried to get rid of the reference using JSON.parse(JSON.stringify(this.value)) but it doesn't seem to work either!
So if I understand your question correctly, you want this behavior: upon the blur event on your <multi-line-input> component, if the value of the input is empty, then set the value to a default value which is specified by the parent (through a prop).
First of all, it is an error to do this.value = ... in your component. You must not modify props, props pass data from parent to child only, the data passed through props is not yours to modify directly from within the component.
Try something like this:
Vue.component('multi-line-input', {
template: '<input #blur="onBlur" #input="onInput" :value="value">',
props: {
value: {
type: String,
default: '',
},
default: {
type: String,
default: '',
},
},
methods: {
onBlur() {
if (!this.value && this.default) {
this.$emit('input', this.default);
}
},
onInput(e) {
this.$emit('input', e.target.value);
},
},
});
new Vue({
el: '#app',
data: {
user: null,
initialUser: null,
},
created() {
// Pretend that I'm pulling this data from some API
this.user = {
name: 'Fred',
email: 'fred#email.com',
address: '123 Fake St',
};
// Make a copy of the data for the purpose of assigning the
// default prop of each input
this.initialUser = _.cloneDeep(this.user);
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="app">
<template v-if="user">
<multi-line-input v-model="user.name" :default="initialUser.name"></multi-line-input>
<multi-line-input v-model="user.email" :default="initialUser.email"></multi-line-input>
<multi-line-input v-model="user.address" :default="initialUser.address"></multi-line-input>
</template>
</div>
Or, if you want the default value to be determined by the component instead of the parent (through a prop), you can do something like this instead:
Vue.component('multi-line-input', {
template: '<input #blur="onBlur" #input="onInput" :value="value">',
props: {
value: {
type: String,
default: '',
},
},
created() {
this.def = this.value;
},
methods: {
onBlur() {
if (!this.value && this.def) {
this.$emit('input', this.def);
}
},
onInput(e) {
this.$emit('input', e.target.value);
},
},
});
new Vue({
el: '#app',
data: {
user: null,
},
created() {
// Pretend that I'm pulling this data from some API
this.user = {
name: 'Fred',
email: 'fred#email.com',
address: '123 Fake St',
};
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="app">
<template v-if="user">
<multi-line-input v-model="user.name"></multi-line-input>
<multi-line-input v-model="user.email"></multi-line-input>
<multi-line-input v-model="user.address"></multi-line-input>
</template>
</div>
However I do not recommend the second approach because the child component instance will only every have one default value for its entire lifetime. Vue reuses component instances whenever possible, so it wouldn't work if Vue were to bind it to a different parent component (how/when would it update its own default state?).
I'm trying to make a shopping cart in polymer And I do not have much knowledge
How do I insert a selected data in template dom-repeat to an array binding to iron localsotage e.model.item it does not work.
<dom-module id="shop-cart">
<template>
<iron-ajax url="list.json" last-response="{{ListProducts}}" auto>
</iron-ajax>
<template is="dom-repeat" items="{{ListProducts}}">
<p style="display:block;width:400px">
<span>{{item.code}}</span>
<span>{{item.title}}</span>
<paper-button raised class="indigo" on-
click="addProduct">Add</paper-button>
<br/>
</p>
</template>
<iron-localstorage name="my-app-storage"
value="{{Orders}}"
on-iron-localstorage-load-empty="initializeDefaultOrders"
></iron-localstorage>
<template is="dom-repeat" items="Orders" as="order">
<div>
<p>{{order.code}}</p>
<p>{{order.title}}</p>
</div>
</template>
</template>
<script>
class ShopCart extends Polymer.Element {
static get is() {
return 'shop-cart';
}
static get properties() {
return {
Product: {
type: String
},
Orders: {
type: Array,
value() {
return [
{
code:'',
title:'',
}
];
},
},
ListProducts: {
type: Array,
value() {
return [];
},
}
}
}
initializeDefaultOrders() {
this.Orders = {
code:'',
title:''
}
};
addProduct(e) {
this.Product= e.model.item.title;
this.push('Orders',this.Product);
this.set('Product','');
}
deleteProduct(e) {
this.splice('Orders', e.model.index, 1);
}
}
window.customElements.define(ShopCart.is, ShopCart);
</script>
</dom-module>
<shop-cart></shop-cart>
The value passed to your method, addProduct(e), has nothing to do with the data model of the item of ListProducts.
Here is an example of shopping cart that binds the selection (a checkbox being checked) to a property of the item, item.selected.
https://github.com/renfeng/android-repository/blob/master/elements/android-sdk-manager.html#L267-L297
If checkboxes are not desirable, you can add a custom attribute to your button. e.g. selected
The following works only for Polymer 1.
<paper-button raised class="indigo" on-click="addProduct" selected="[[item.title]]">Add</paper-button>
And, have the following line to retrieve the title of the item selected.
this.Product= e.target.getAttribute("selected");
For Polymer 2, here is your fix.
https://github.com/renfeng/stackoverflow-question-44534326/commit/b2a4226bd5a1f5da7fa2d5a8819c53c65df7c412
Custom attribute has been proposed for Polymer 2, but not seem to be accepted for this moment. See https://github.com/Polymer/polymer/issues/4457