Vue가 루프에서 변수를 찾을 수 없는 이유는 무엇입니까?

Question

간단한 구성요소를 개발하여 루프에서 사용하려고 합니다.

으아악 으아악

아직 작동하지 않지만 실패했습니다.

으아악

주어진ReferenceError：在视图中找不到变量：m. 이상한 이유로 단락에서도 동일한 작업이 수행됩니다. 즉, 오류가 없습니다.

으아악

변수를 찾을 수 없는 원인은 무엇인가요?

PS: 여기 바이올린이 있습니다: https://jsfiddle.net/andig2/u47gh3w1/. table가 포함되면 다른 오류가 표시됩니다.

Update 루프의 목적은 여러 테이블을 생성하는 것입니다. 각 테이블의 행 수는 여러 개로 생성됩니다 measurement

Answer 1

교체된 경우

으아악

그리고

으아악

작업 코드가 완성됩니다.

그러나 아마도 당신은

를 사용하고 싶을 것입니다. 으아악

또는

으아악

Answer 2

TLDR: Vue가 DOM 템플릿을 전달하기 전에 브라우저는 <measurement v-bind:name="i" v-bind:data="m"> 提升到 之外<table>（在 v-for을 컨텍스트에서 제외하여 Vue에 오류가 발생합니다. 이는 DOM 템플릿 구문 분석에 대해 알려진 경고입니다.

---

HTML 사양에서는 <table> 특정 하위 요소만 포함해야 합니다 :

• <script> 或

마찬가지로 的<a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element" rel="nofollow noreferrer">内容模型<tr> 는:

• <script> 或

브라우저 호환 DOM 파서는 허용되지 않는 요소(예: <measurement>)를 테이블에서 자동으로 제거합니다. 이는 스크립트 단계 이전에 발생합니다(Vue가 보기도 전에).

예를 들어 다음 태그는 다음과 같습니다.

으아아아

...DOM 구문 분석 후(스크립팅 전)는 다음과 같습니다:

으아아아

i 및 m이 어떻게 v-for 루프의 컨텍스트 외부에 있는지 확인하세요. 이로 인해 i에 대한 우려가 발생합니다. > code> 및 m은 정의되지 않은 Vue 런타임 오류입니다(구성 요소가 이를 선언하지 않는 한). m의 목적은 i 和 m 是如何位于 v-for 循环的上下文之外的，这会导致有关 i 和 m 未定义的 Vue 运行时错误（除非您的组件碰巧已经声明了它们）。 m 的目的是绑定到 <measurement> 的 data 属性，但由于失败，data 只是其初始值（也是 undefined），导致 {{data.value}} 的渲染失败。 cphpcn渲染错误：“类型错误：无法读取未定义的属性‘值’”의 data 속성에 바인딩하는 것이지만, 이것이 실패하므로 data는 초기 값일 뿐입니다(또한 정의되지 않음 code>), {{data.value}} 렌더링이 실패하게 됩니다. cphpcn 렌더링 오류: "TypeError: 정의되지 않은 '값' 속성을 읽을 수 없습니다.".

런타임 오류와 Vue 없이 부스팅을 시연하려면 다음 코드 조각을 실행하세요.

으아아아