Vue.js 屬性上的元素引用

Question

我有以下代碼：

<input type="text"
       @input="disableField($event.target)"
       :disabled="isFieldDisabled(????)"
/>

我想將我在 $event.target 中獲得的相同值傳遞給 isFieldDisabled 方法 - 元素引用。 我找不到如何做到這一點的方法。 我知道我可以使用:ref 但在這種情況下我需要按上面所示的方式進行操作。

這只是示例用例。 我知道禁用該字段我可以做得更好，但我想以最簡單的方式顯示問題。

Answer 1

這不可能按照您要求的方式進行。

• Vue 使用 VNode 的方式，當您第一次嘗試評估disabled時，該元素將不存在：Vue 評估屬性以確定 DOM的外觀，然后創建要匹配的元素。 如這里：

  請注意，您只能在安裝組件后訪問 ref。 如果您嘗試訪問模板表達式中的input ，第一次渲染時它將是null 。 這是因為該元素在第一次渲染之后才存在！

• 對於異步組件，即使還沒有要渲染的組件，屬性也需要具有明確定義的值，更不用說那里有明確定義的元素 position 了。
• 使用片段組件，永遠不會有一個 HTML 元素與之交互，因為該組件代表多個頂級 HTML 元素。

事件不必遵循相同的規則，因為您正在定義處理程序：DOM 事件將來自一個源並應用於一個目標，並且缺少的組件不會發出事件。 即使那樣，語法也允許您訪問$event ，而不是$el以獲取直接元素引用。

最直接的方法是在 Vue 創建它之后使用ref獲取 object，遵守上面相同的 null-on-first-render ref規則。 如果您需要將句柄以getFoo(argument)的形式傳遞給多用途方法，您的參數可能必須是您定義的字符串或枚舉鍵，而不是元素本身。