Всем привет. Столкнулся со следующей проблемой (гугл не помог).
Использую Vue.js на обычном html.
<div id="app">
</div>
...
var app = new Vue({
el: "#app",
data: function () {}
...
})
Внутри div#app решил вставить Vue-компонент попроще.
Решил использовать для этих целей однофайловый компонент, т.к. с ним удобнее работать (особенно писать шаблон), например:
<template>
<div>
<h1>{{title}}</h1>
<p>{{obj.id}}</p>
...
</div>
</template>
<script>
export default {
name: "MyComponent",
props: {
title: {
type: String
},
obj: {
type: Object
},
arr: {
type: Array
}
}
};
</script>
Далее с помощью команды vue-cli-service build --target wc --name my-component ./src/components/MyComponent.vue перевожу его в веб-компонент и подключаю на странице после подключения самой библиотеки Vue.js как обычный js-скрипт.
Затем вставляю внутрь div#app теги
<div id="app">
<my-component v-bind:text="title" v-bind:obj="objOne" v-bind:arr="arrTest"></my-component>
</div>
Далее в одном из методов основного приложения я получаю некие данные (title, objOne, arrTest) и передаю их компоненту my-component.
Проблема в том, что внутрь компонента почему все переданные значения приходят как строки, например свойство obj превращается в строку '[Object object]'.
Возникает вопрос, как правильно передать данные полученному компоненту?
Спасибо.
