Блог

У меня есть два компонента, первый предназначен для загрузки файла, а второй — для отображения файла. Внутри моего компонента загрузки я хотел бы вызвать компонент предварительного просмотра и добавить параметр, чтобы метод внутри компонента предварительного просмотра использовал значение, созданное внутри компонента загрузки.

До сих пор я делал это:

UploadComponent.vue

 <template>
    …
    <button @click="upload"></button>
    <preview-component :url="this.location"></preview-component>
</template >

<script>
import PreviewComponent from '@/js/components/PreviewComponent';

export default {
    components: {
        'preview-component': PreviewComponent
    },

    props: ['url'],

    data () {
        return {
            // ...
            location: ''
        }
    },

    methods: {
        upload() {
            // ... upload stuff then update the global var location
            this.location = response.data.location;
        },
    }

}
</script>
  

Это мой компонент предварительного просмотра:

 <template>
    <div id="body">
        ///...
    </div>
</template>

<script>
export default {
    props: ['url'],

    methods: {
        loadPdf (url) {
            //
        },
    }    
}
</script>
  

Пока я получаю сообщение об ошибке, что URL не определен, поэтому на самом деле он не отправляет URL из UploadCOmponent в PreviewComponent, как мне его отправить?

У вас есть ninja this в вашем UploadComponent шаблоне.

Это должно быть <preview-component :url="location"></preview-component>