Question

在我的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渲染动态图像吗？

Answer 1

<head>
  <script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

尝试这样的事情：

<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" }]
  },
});

条件渲染组件vue.js

1 个答案: