在我的vue.js应用程序中,我只想渲染一些html元素,如果我之前选择了项目。
如果选择了项目,那么我再次将其显示为小型迷你卡版本。
使用下面的代码看起来很容易做到这一点:
<div v-if="objSelected">
<p>test</p>
<mini-card v-bind:item="objSelected"></mini-card>
</div>
但v-if机制之所以有效,是因为它在其中很好地显示了p标记。但从不显示迷你卡组件
我也尝试了:
<mini-card v-if="objSelected" v-bind:item="objSelected"></mini-card>
<mini-card v-bind:item="obj1"></mini-card>
这个问题似乎是在处理动态渲染组件。
但是为什么这个简单的动态渲染代码不能工作呢?
如何动态显示组件或在用户操作后显示组件?
编辑:
包含迷你卡(静态显示)的测试组件的声明:
import MiniCard from "./mini-card"
export default
{
name: "Test",
components: {MiniCard},
包含迷你卡(不动态显示)的游戏组件的声明:
import MiniCard from "./mini-card"
export default
{
name: "game",
components: {MiniCard},
我的实例vue声明:
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')
我使用vue-router,它显示其他组件,而不是包含在此声明中。
最终
我问题变成了将图像渲染到组件中(如果组件静态调用,这个带有图像的组件运行,但如果我动态调用,它会产生错误):
<img :src="require('@/assets/' + this.item.logo)" width="50" height="50" alt="logo"></img>
问题是:
Vue warn:渲染时出错:“错误:找不到模块'./'”
不能用vuejs渲染动态图像?
发布于 2019-03-18 00:16:30
<img :src="require('@/assets/' + this.item.logo)" width="50" height="50" alt="logo"></img>
尝试如下所示:
<img :src="`@/assets/${item.logo}`" width="50" height="50" alt="logo"></img>
要使用动态数据更新组件,请执行以下操作:
// extend and register in one step
Vue.component('mini-card', {
//Props camelCase in JS
props: {
item: {
type: Object
}
},
// show your data
template: `<strong>{{ item.name }}</strong>`
});
new Vue({
el: '#container',
data: {
selected: null,
items: [{ name: "Water" }, { name: "Fire" }, { name: "Cold" }]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
<select v-model="selected">
<option
v-for="item in items"
:value="item">
{{ item.name }}
</option>
</select>
<mini-card :item="selected" />
</div>
https://stackoverflow.com/questions/55207069
复制相似问题