出于学习目的,我正在Svelte中开发一个小型ToDo应用程序(对Svelte来说是新手)。
我认为:
<div class="input-group p-2" id="editForm">
<input type="text" class="form-control" id="old_todo" value={currentToDo.title} placeholder="Edit Todo">
<div class="input-group-append">
<button on:click="{addTodo}" class="btn btn-sm btn-success">Save</button>
</div>
</div>
//More code
{#each todos as t, index}
<tr>
<td>{index + 1}</td>
<td class="{t.completed == true ? 'completed' : ''}">{t.title}</td>
<td class="text-center"><input type="checkbox" on:change={completeTodo(t.id)}></td>
<td class="text-right">
<div class="btn-group">
<button on:click="{editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
<button on:click="{deleteTodo(t.id)}" class="btn btn-sm btn-danger">Delete</button>
</div>
</td>
</tr>
{/each}
我认为脚本的一部分与此处有关:
<script>
import {onMount} from "svelte";
const apiURL = "https://jsonplaceholder.typicode.com/todos?_start=1&_limit=20";
let todos = [];
onMount(async function() {
const response = await fetch(apiURL);
todos = await response.json();
todos.reverse();
});
var currentToDo = {};
function editTodo(tid) {
let itemIdx = todos.findIndex(x => x.id == tid);
let currentToDo = todos[itemIdx];
}
<script>
请参阅REPL here 。
问题是文本字段<input type="text" class="form-control" id="old_todo" value={currentToDo.title} placeholder="Edit Todo">
显示undefined
而不是当前的(待编辑)待办事项标题。
我的错误在哪里?
答案 0 :(得分:1)
好吧,currentToDo.title
确实是undefined
...
如果要避免出现此显示,可以更改为currentToDo.title || ''
:
<input type="text" class="form-control" id="old_todo" value={currentToDo.title || ''} placeholder="Edit Todo">
还可以让您使用“编辑”按钮...
更改此:
<button on:click="{editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
对此:
<button on:click="{() => editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
on:click="{editTodo(t.id)}
变为on:click="{() => editTodo(t.id)}
,否则您的editTodo
函数在每个渲染中被调用一次,但是在实际单击按钮时不会被调用(在Svelte中,您传递函数引用,而不是函数< em> body ,例如普通的HTML onclick
。
此外,在您的editTodo
函数中:
function editTodo(tid){
let itemIdx = todos.findIndex(x => x.id == tid);
let currentToDo = todos[itemIdx];
}
您需要删除此let
才能使用根范围currentToDo
,而不要使用局部范围的变量
function editTodo(tid){
let itemIdx = todos.findIndex(x => x.id == tid);
currentToDo = todos[itemIdx];
}
然后您可以单击“编辑”按钮,标题将按预期显示在输入字段中!