- 上传者： Administrator
- 上传时间：2023年09月15日 07时41分34秒
摘要：
我们仍然使用硬编码的任务列表。是时候让用户自己添加任务了。第一步是向 Root 组件添加一个输入。 但是这个输入将在任务列表之外，所以我们需要调整 Root template, js, and css: < div class = " todo-app " > < input ......
我们仍然使用硬编码的任务列表。是时候让用户自己添加任务了。第一步是向 Root 组件添加一个输入。 但是这个输入将在任务列表之外，所以我们需要调整 Root template, js, and css: < div class = " todo-app " > < input ......
正文
相关文章
请喝咖啡
我们仍然使用硬编码的任务列表。是时候让用户自己添加任务了。第一步是向Root组件添加一个输入。 但是这个输入将在任务列表之外，所以我们需要调整Root template, js, and css:
<div class="todo-app">
<input placeholder="Enter a new task" t-on-keyup="addTask"/>
<div class="task-list">
<t t-foreach="tasks" t-as="task" t-key="task.id">
<Task task="task"/>
</t>
</div>
</div>addTask(ev) {
// 13 is keycode for ENTER
if (ev.keyCode === 13) {
const text = ev.target.value.trim();
ev.target.value = "";
console.log('adding task', text);
// todo
}
}.todo-app {
width: 300px;
margin: 50px auto;
background: aliceblue;
padding: 10px;
}
.todo-app > input {
display: block;
margin: auto;
}
.task-list {
margin-top: 8px;
}现在我们有了一个工作输入，每当用户添加任务时，它都会记录到控制台。请注意，在加载页面时，输入没有聚焦。但是添加任务是任务列表的核心功能，所以让我们通过集中输入来尽可能快地完成它。
我们需要在Root组件准备好(挂载)时执行代码。让我们使用onMounted钩子来实现这一点。我们还需要通过使用带有useRef钩子的t-ref指令来获取对输入的引用:
<input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>// on top of file:
const { Component, mount, xml, useRef, onMounted } = owl;// in App
setup() {
const inputRef = useRef("add-input");
onMounted(() => inputRef.el.focus());
}这是一种非常常见的情况:每当我们需要根据组件的生命周期执行一些操作时，我们都需要在setup方法中通过使用一个生命周期钩子来完成。在这里，我们首先获得一个对inputRef的引用，然后在onMounted钩子中，我们简单地聚焦html元素。
本文章从网上收集，如有侵权请联系tderp@tderp.com删除- 微信扫一扫，一分也是爱:
-
服务原则及地区范围
宜兴通达网络科技有限公司，地处中国宜兴环科园内，是一家高新技术企业。公司在企业网络维护和企业信息化建设与咨询方面，有10多年经验。
我公司愿与客户一道，力求彻底解决客户问题！
我们不是在给企业提供“头痛医头、脚痛医脚”的暂时解决方案，而是在部署根本性安全与稳定服务！！
我们愿携手客户，建立企业IT规划；杜绝随意安装系统、软件等操作；力求共同维护有序、安全、稳定的网络办公环境！！！
IT服务，服务是根本，客户是上帝；我们提供快速响应、快速上门、快速排查，提供优质高效的服务！！！！
通达科技提供全国范围内的服务，服务形式包括远程协助、电话咨询、电子邮件咨询、传真咨询、问答平台的问题解决等。
宜兴地区提供上门服务：
- 市区服务：宜城街道、城北街道（屺亭街道）、新街街道、新庄街道、环科园、渚桥开发区
- 市郊服务：张渚镇、西渚镇、太华镇、徐舍镇、官林镇、杨巷镇、新建镇、和桥镇、高塍镇、万石镇、周铁镇、芳桥镇、丁蜀镇、湖父镇。
- 联系电话：189-21-343434
- 在线沟通：
