如何使用具有Object-type属性的Lit-element? 我认为定义myelement有效:
static get properties() {
return {
whales:Object
}
}
constructor() {
super();
this.whales={"nb":0};
}
html,这也有效:
<my-element id="mytest" whales='{"nb":2}'></my-element>
但是我无法让setAttribute工作:
myElement.setAttribute("whales", {"nb":4});
编辑: 谢谢你,你的回答帮助我解决了我的问题。如果有人想知道,这是完整的工作示例。但是仍然有一件事我无法工作:如果值是一个对象(对象被处理为字符串),我不知道如何以声明方式给出属性初始值。
的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lit-html test</title>
</head>
<body>
<script type="module" src="./components/my-e.js"></script>
<button id="reset" onclick="reset()">reset</button>
<p>1 works: <my-e id="mytest"></my-e></p>
<p>2 doesn't work: <my-e id="mytest2" person='{"name":"Joe", "age":32}'></my-e></p>
<script src="main.js"></script>
</body>
</html>
main.js:
function updatePerson(e) {
var myE = e.target;
myE.person = e.detail;
myE._requestRender();
}
function reset() {
var p = { "name": "Jack", "age": 20 };
var myE = document.getElementById('mytest');
myE.person = p;
myE._requestRender();
myE = document.getElementById('mytest2');
myE.person = p;
myE._requestRender();
}
document.getElementById('mytest').addEventListener('person', updatePerson);
document.getElementById('mytest2').addEventListener('person', updatePerson);
MY-e.js:
import { LitElement, html } from './lit-element.js';
class MyE extends LitElement {
static get properties() {
return {
person: Object
}
}
constructor() {
super();
this.person = { "name": "Paul", "age": 40 };
this.addEventListener('click', async (e) => {
await this.renderComplete;
var p = {};
p.name = this.person.name + ", a";
p.age = this.person.age + 1;
this.dispatchEvent(new CustomEvent('person', { detail: p }))
});
}
_render({ person }) {
return html`
<p> Name: ${person.name}</p>
<p>Age: ${person.age}</p>
`;
}
}
customElements.define('my-e', MyE);
答案 0 :(得分:2)
您正在尝试更新属性,而不是真正设置属性,并且您没有在属性上使用reflectToAttribute
。但你可以尝试简单地使用:
myElement.whales = {nb: 4};
更新:我看到您更改了问题的“范围”..因此,只要JSON正确,您就应该能够以声明方式传递对象。您可以在this demo中看到它。
答案 1 :(得分:0)
<my-e id="mytest2" person='{"name":"Joe", "age":32}'></my-e>
应该是
<my-e id="mytest2" person='${{"name":"Joe", "age":32}}'></my-e>
如果您使用的是光扩展。但是此表示法将被删除,目前不建议使用。
因此,更好的选择是将其编写为:
<my-e id="mytest2" .person={"name":"Joe", "age":32}></my-e>
您可以在此documentation
中找到详细信息