跟随视频搭建笔记网站遇Property assignment expected报错及删除失效

跟着视频教程搭建笔记网站时，先是遇到模板语法报错，把代码改成({ note,id })后报错消失，但笔记删除功能完全失效，找不到问题所在。

相关代码 #

HTML模板代码 #

{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content %}
  <h1 align="center">Notes</h1>
  <ul class="list-group list-group-flush" id="notes">
    {% for note in user.notes %}
    <li class="list-group-item">
      {{ note.data }}
      <button type="button" class="close" onClick="deleteNote({{ note.id }})">
        <span aria-hidden="true">&times;</span>
      </button>
    </li>
    {% endfor %}
  </ul>
  <form method="POST">
    <textarea name="note" id="note" class="form-control"></textarea>
    <br />
    <div align="center">
      <button type="submit" class="btn btn-primary">Add Note</button>
    </div>
  </form>
{% endblock %}

JS代码 #

function deleteNote(noteId) {
    fetch("/delete-note", {
      method: "POST",
      body: JSON.stringify({ noteId: noteId }),
    }).then((_res) => {
      window.location.href = "/";
    });
  }

原始报错信息（翻译后） #

[{"resource": "/c:/flaskweb/website/templates/home.html","owner": "_generated_diagnostic_collection_name_#1","severity": 8,"message": "预期属性赋值。","source": "javascript","startLineNumber": 8,"startColumn": 64,"endLineNumber": 8,"endColumn": 65}]
[{"resource": "/c:/flaskweb/website/templates/home.html","owner": "_generated_diagnostic_collection_name_#1","severity": 8,"message": "预期','。","source": "javascript","startLineNumber": 8,"startColumn": 70,"endLineNumber": 8,"endColumn": 71}]
[{"resource": "/c:/flaskweb/website/templates/home.html","owner": "_generated_diagnostic_collection_name_#1","severity": 8,"message": "预期','。","source": "javascript","startLineNumber": 8,"startColumn": 75,"endLineNumber": 8,"endColumn": 76}]

问题分析与解决 #

1. 最初模板报错的原因 #

原始模板中onClick="deleteNote({{ note.id }})"的写法有问题：如果note.id是字符串类型，渲染到页面后会变成deleteNote(xxx)（无引号包裹），JS会把xxx当成变量而非字符串，直接触发语法错误，也就是你看到的那些报错。

2. 删除功能失效的原因 #

你改成({ note,id })应该是把循环语句改成了{% for { note, id } in user.notes %}，但模板里的按钮仍在使用{{ note.id }}——此时note对象里已经没有id属性（解构后id被单独提取），实际传给deleteNote的是undefined，后端无法识别要删除的笔记ID，导致功能失效。

修复方案 #

方案一：改回原始循环，修复模板语法错误

把循环改回{% for note in user.notes %}，同时给按钮的参数加引号：

<button type="button" class="close" onClick="deleteNote('{{ note.id }}')">

这样渲染后JS会收到正确的字符串ID，既解决语法报错，也能正常执行删除操作。

方案二：保留解构循环，修正模板变量

如果要保留{% for { note, id } in user.notes %}的写法，把按钮里的{{ note.id }}改成{{ id }}，同样要给ID加引号：

<button type="button" class="close" onClick="deleteNote('{{ id }}')">

另外还要检查后端的/delete-note接口，确认它能正确解析请求体里的noteId参数，并且根据ID执行删除操作。

内容的提问来源于stack exchange，提问作者Aleyna