Svelte绑定input时出现invalid-directive-value错误的解决咨询

问题重现 #

尝试给输入框绑定值时使用了可选链：

const link = {};
...
<input name="url" bind:value={link?.url} />

出现编译错误：

CompileError [ValidationError]: Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)

错误原因 #

Svelte的双向绑定要求绑定目标是可赋值的引用，而可选链操作符?.返回的是属性值（如果存在）或undefined，不是一个可以被赋值的引用。编译器无法处理这种非直接的成员表达式绑定，因此抛出该错误。

解决办法 #

方法1：直接使用成员表达式（推荐） #

因为你已经初始化了link为一个空对象，link本身不会是null或undefined，所以可以直接去掉可选链：

const link = {};
...
<input name="url" bind:value={link.url} />

方法2：确保绑定对象存在后再渲染 #

如果link可能为null或undefined，可以用条件渲染先判断对象是否存在，再渲染输入框：

{#if link}
  <input name="url" bind:value={link.url} />
{/if}

方法3：初始化默认属性 #

提前给link对象初始化url属性，避免属性不存在的情况：

const link = { url: '' };
...
<input name="url" bind:value={link.url} />

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