Vue.js - 从 ajax 调用加载组件
Vue.js - load component from ajax call
我正在尝试从 api 数据渲染或加载组件。为了解释更多,假设我有测试组件,我将它直接注入到我的父组件中,它可以工作。但是当我试图将组件标签保存在数据库中并 运行 一个 ajax 调用时,我的组件标签显示但不起作用或者更确切地说加载/渲染。请帮忙。
Return 来自我的 api:
{
"_id": "59411b05015ec22b5bcf814b",
"createdAt": "2017-06-14T11:16:21.662Z",
"updatedAt": "2017-06-14T12:41:28.069Z",
"name": "Home",
"content": "<test-comp></test-comp>",
"slug": "/",
"navName": "Home",
"__v": 0,
"landing": true,
"published": false
}
我的父组件:
<template>
<div>
<test-comp></test-comp> // This works
<div v-html="page.content"></div> // But this doesn't :(
</div>
</template>
<script>
import { Api as defApi } from 'shared';
import test from './testComp';
export default {
data: () => ({
page: {}
}),
created() {
defApi.get('api/pages/landing')
.then((res) => {
this.page = res.data.body;
});
},
components: {
testComp: test
}
};
</script>
您只能在 v-html
标签中指定纯文本 HTML。因此,在传递给 v-html
的字符串中添加组件标记将不起作用。
如果您只是想指定组件类型,可以使用 dynamic component。在您的情况下,它可能看起来像这样:
<template>
<div>
<component :is="dynamicComponent"></component>
</div>
</template>
<script>
import { Api as defApi } from 'shared';
import test from './testComp';
export default {
data: () => ({
dynamicComponent: null,
}),
created() {
defApi.get('api/pages/landing')
.then((res) => {
this.dynamicComponent = res.data.componentType; // e.g. "testComp"
});
},
components: {
testComp: test
}
};
</script>
我正在尝试从 api 数据渲染或加载组件。为了解释更多,假设我有测试组件,我将它直接注入到我的父组件中,它可以工作。但是当我试图将组件标签保存在数据库中并 运行 一个 ajax 调用时,我的组件标签显示但不起作用或者更确切地说加载/渲染。请帮忙。
Return 来自我的 api:
{
"_id": "59411b05015ec22b5bcf814b",
"createdAt": "2017-06-14T11:16:21.662Z",
"updatedAt": "2017-06-14T12:41:28.069Z",
"name": "Home",
"content": "<test-comp></test-comp>",
"slug": "/",
"navName": "Home",
"__v": 0,
"landing": true,
"published": false
}
我的父组件:
<template>
<div>
<test-comp></test-comp> // This works
<div v-html="page.content"></div> // But this doesn't :(
</div>
</template>
<script>
import { Api as defApi } from 'shared';
import test from './testComp';
export default {
data: () => ({
page: {}
}),
created() {
defApi.get('api/pages/landing')
.then((res) => {
this.page = res.data.body;
});
},
components: {
testComp: test
}
};
</script>
您只能在 v-html
标签中指定纯文本 HTML。因此,在传递给 v-html
的字符串中添加组件标记将不起作用。
如果您只是想指定组件类型,可以使用 dynamic component。在您的情况下,它可能看起来像这样:
<template>
<div>
<component :is="dynamicComponent"></component>
</div>
</template>
<script>
import { Api as defApi } from 'shared';
import test from './testComp';
export default {
data: () => ({
dynamicComponent: null,
}),
created() {
defApi.get('api/pages/landing')
.then((res) => {
this.dynamicComponent = res.data.componentType; // e.g. "testComp"
});
},
components: {
testComp: test
}
};
</script>