条件渲染组件 vue.js答案

【问题标题】：conditionnal rendering component vue.js条件渲染组件 vue.js
【发布时间】：2019-08-07 23:27:40
【问题描述】：

在我的 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 警告]：渲染错误：“错误：找不到模块 './'”

vuejs 无法渲染动态图片？

【问题讨论】：

它应该可以工作。你也可以展示你的 Vue.js 实例吗？
您是否在父组件属性中包含迷你卡？还是全局定义？
您是否尝试在工作组件（“测试”组件）内有条件地渲染<mini-card v-if="whateverCondition" v-bind:item="objSelected"></mini-card>？如果它有效，那么您的问题是您如何在 Game 内需要 MiniCard

标签： vuejs2 vue-component

【解决方案1】：

<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>

【讨论】：