条件呈现组件vue.js
条件呈现组件vue.js
提问于 2019-03-17 20:31:42
在我的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渲染动态图像？
回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55207069
复制相关文章
相似问题