programing

Vue js가 사용자 지정 구성 요소를 렌더링하지 않음

newsource 2023. 1. 20. 16:12

Vue js가 사용자 지정 구성 요소를 렌더링하지 않음

저는 이것을 사용하고 있습니다.http://monterail.github.io/vue-multiselect/ vue와 그 libaries를 사용하여 단일 js 파일을 빌드하고 다른 코드를 스크립트 태그에 넣습니다.컴포넌트가 등록되었습니다.데이터를 넣었더니 비어있네요

여기에 이미지 설명 입력

'시작하기'의 코드일 뿐 특별한 건 없어요콘솔에 오류는 없고 빈 노드만 있습니다.중요한 건 이걸 다른 컴포넌트 안에 넣고inline-template(루트: 루트에서도 동일)

여기에 이미지 설명 입력

이렇게 해서 웹 팩을 사용하여 파일이 생성되었습니다.

window.Vue = require('vue');
window.Multiselect = require('vue-multiselect');

그러면 컴파일된 파일을 넣고 스크립트를 추가합니다.

<script>
    Vue.component('multiselect', Multiselect);
    new Vue({
        el: '#vue-app',
        data: {
            options: ['one', 'two'],
            model: ''
        },
        created: function () {},
        computed: {},
        methods: {}
    });
</script>

'vue-multiselect'모듈은 다음과 같이 Import됩니다.

import Multiselect from 'vue-multiselect'

를 사용하여 할당한다.Multiselect모듈의 디폴트 내보내기 값이 됩니다.

하지만, 당신이require, 할당하고 있습니다.Multiselect모듈 오브젝트가 되다default구성 요소의 구성 옵션을 포함하는 속성.기본 내보내기가 해결되지 않고 액세스하려는 값이 다음 위치에 있습니다.Multiselect.default.

다음 중 하나를 사용해야 합니다.import또는 에 액세스 합니다.default정의 시 속성'multiselect'컴포넌트:

Vue.component('multiselect', Multiselect.default);

언급URL : https://stackoverflow.com/questions/44398312/vue-js-not-rendering-a-custom-component