元素未更新 html Polymer V3 上的值
element not updating value on html Polymer V3
我想在使用 AddItem()
方法在 child 中添加新项目后更新 PARENT COMPONENT 中的 todoList。第一次没有添加任何东西。
前任。如果我添加 "take test" 不会被渲染,那么如果我添加 "take shower" 不会被渲染但现在 "take test" 会。然后如果我添加 "take a leak" "take shower" 得到渲染。
PARENT 组件
firstUpdated(changedProperties) {
this.addEventListener('addItem', e => {
this.todoList = e.detail.todoList;
});
}
render() {
return html`
<p>Todo App</p>
<add-item></add-item>//Child item that triggers the add
<list-items todoList=${JSON.stringify(this.todoList)}></list-items>
`;
}
CHILD 组件
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: storedLocalList }
})
);
this.todoItem = '';
}
}
render() {
return html`
<div>
<input .value=${this.todoItem} @keyup=${this.inputKeyup} />
<button @click="${this.AddItem}">Add Item</button>
</div>
`;
}
您需要为 todoItem
设置 properties
static get properties() {
return {
todoItem: {
type: Array,
Observer: '_itemsUpdated'
}
}
constructor(){
this.todoItem = []
}
_itemsUpdated(newValue,oldValue){
if(newValue){
-- write your code here.. no event listeners required
}
}
在上面的代码中,我们需要初始化 constructor
中的空数组。
Observer
观察数组的变化并触发 itemsUpdated
带有 oldValue 和 NewValue 的函数。在那个函数中,你可以放置你的逻辑。
根据我的假设不需要事件侦听器
发现我的错误。我传递给 detail: { todoList : storedLocalList } 这是没有更新值的旧数组。
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: todoList }
})
);
this.todoItem = '';
}
}
我想在使用 AddItem()
方法在 child 中添加新项目后更新 PARENT COMPONENT 中的 todoList。第一次没有添加任何东西。
前任。如果我添加 "take test" 不会被渲染,那么如果我添加 "take shower" 不会被渲染但现在 "take test" 会。然后如果我添加 "take a leak" "take shower" 得到渲染。
PARENT 组件
firstUpdated(changedProperties) {
this.addEventListener('addItem', e => {
this.todoList = e.detail.todoList;
});
}
render() {
return html`
<p>Todo App</p>
<add-item></add-item>//Child item that triggers the add
<list-items todoList=${JSON.stringify(this.todoList)}></list-items>
`;
}
CHILD 组件
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: storedLocalList }
})
);
this.todoItem = '';
}
}
render() {
return html`
<div>
<input .value=${this.todoItem} @keyup=${this.inputKeyup} />
<button @click="${this.AddItem}">Add Item</button>
</div>
`;
}
您需要为 todoItem
properties
static get properties() {
return {
todoItem: {
type: Array,
Observer: '_itemsUpdated'
}
}
constructor(){
this.todoItem = []
}
_itemsUpdated(newValue,oldValue){
if(newValue){
-- write your code here.. no event listeners required
}
}
在上面的代码中,我们需要初始化 constructor
中的空数组。
Observer
观察数组的变化并触发 itemsUpdated
带有 oldValue 和 NewValue 的函数。在那个函数中,你可以放置你的逻辑。
根据我的假设不需要事件侦听器
发现我的错误。我传递给 detail: { todoList : storedLocalList } 这是没有更新值的旧数组。
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: todoList }
})
);
this.todoItem = '';
}
}