programing

Vue 사용에 대한 v-의 알 수 없는 속성

goodsources 2022. 8. 21. 20:01
반응형

Vue 사용에 대한 v-의 알 수 없는 속성

저는 이 문제를 이해하려고 노력하고 있습니다.v-forVue JS의 개념과 저는 이 프레임워크에 매우 익숙하지 않습니다.

저는 장고를 사용하고 있기 때문에 커스텀 딜리미터를 사용하고 있습니다.데이터 속성에 개체 목록을 추가하는 예제 스크립트가 있습니다.

var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',
    data: {
        loading: true,
        datasetFilesArray: null
    },
    methods: {
        datasetFiles: function () {
            axios.get('api/list_all_data')
                .then(response => {
                    this.loading = false;

                    this.datasetFilesArray = response.data;
                })
                .catch(error => {
                    console.log(error)
                });
        }
    },
    beforeMount() {
        this.datasetFiles()
    }
});

처음에datasetFilesArray는 늘이지만 응답이 수신되면 늘이 객체로 대체됩니다.

HTML 태그에서 이것을 사용하려고 하면 다음과 같이 됩니다.

...
<tr v-for="content in datasetFilesArray">
    <th class="align-middle">
        <a href="">[[content.file_name]]</a>
    </th>
    <th class="align-middle">[[content.date]]</th>
</tr>
...

라고 하는 에러가 발생하고 있습니다.Property or method "content" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.하지만 내가 더하면 모든 것이 잘 작동한다.content로.data다음 작업을 수행합니다.

...
data: {
    loading: true,
    datasetFilesArray: null
    content: null
},
...

단, https://vuejs.org/v2/guide/list.html#v-for-with-an-Object,의 예에서는value키워드가 초기화되지 않아 동작하고 있는 것처럼 보입니다.

내가 뭘 잘못하고 있나요?

갱신하다

난 이게 그 재산들을 가져갔을지도 모른다고 생각했어요.meta~하듯이<meta http-equiv="X-UA-Compatible" content="ie=edge">태그를 붙여서 에서 바꿨습니다.content로.datasetItems같은 에러가 계속 납니다.

업데이트 2

my page의 예:

개발자 도구를 보시면 제가 말한 오류를 알 수 있습니다.

편집 의심스러운 내용입니다.

<tr v-for="content in datasetFilesArray">
    [[content]]

의 자녀로서 직접 텍스트를 가질 수 없습니다.<tr>엘리먼트, 이것은, 1분 이내에 있을 필요가 있습니다.<td>또는<th>또는, 그렇지 않은 경우 외부로 푸시됩니다.<tr>(아래 HTML 테이블에 대한 코멘트를 참조해 주세요).

기본적으로 Vue가 템플릿을 컴파일하기 전에 DOM은 다음과 같이 끝납니다.

[[content]]
<tr v-for="content in datasetFilesArray">

확실히.content범위 밖에서 사용되고 있기 때문에 대신 컴포넌트 인스턴스의 속성으로 검색됩니다(생성된 렌더 함수는 이 매직이 설명되는 스테이트먼트로 랩되어 있습니다).contentVue가 이 경고를 발생시키는 구성 요소에 정의되어 있지 않습니다.그 후 선언했습니다.content내부data컴포넌트의 속성이 정의되어 있습니다만, 경고를 무시한 것이 전부이기 때문에 상황은 더욱 복잡해집니다.

대신 다음을 시도해 보십시오.

<tr v-for="content in datasetFilesArray">
    <th>[[content]]</th>

마지막으로 자세한 내용은 Vue.js DOM 템플릿을 피하는 이유를 참조하십시오.


당신이 제공한 오류의 원인을 보면 분명하지 않습니다.바이올린을 제공할 수 있습니까?

이 에러는, 을 나타내고 있습니다.content템플릿에서 사용되는 범위 내에서 선언되지 않았습니다.에 의해 선언됩니다.v-for의 임의의 사용방법content의 범위 내에서<tr>유효해야 합니다.사용하시는 경우content그것이 이 에러의 원인일 가능성이 있습니다.

코드를 하여 javascript에 접속하고 있는지 합니다.this.content특히 템플릿 내에서 실행할 수 있는 메서드 또는 계산 속성에 의해 모든 위치를 지정할 수 있습니다.

HTML을 사용합니다.테이블이 올바르게 표시되지 않으면 브라우저에 의해 요소가 자동으로 닫힐 수 있습니다. 있는지 하세요.<table>,<tr>,<th> ★★★★★★★★★★★★★★★★★」<td>로로 합니다.<div>HTML을

언급URL : https://stackoverflow.com/questions/58814386/unknown-property-in-v-for-using-vue

반응형