Блог

Главная - Вопросы по программированию - компонент условной визуализации vue.js

компонент условной визуализации vue.js

#vuejs2 #vue-component

#vuejs2 #vue-компонент

Вопрос:

В моем 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?

Комментарии:

1. Это должно сработать. Можете ли вы показать свой Vue.js также экземпляр?

2. Включаете ли вы мини-карту в свойство родительских компонентов? Или это определено глобально?

3. Вы пытались выполнить условный рендеринг <mini-card v-if="whateverCondition" v-bind:item="objSelected"></mini-card> внутри рабочего компонента («тестового»)? Если это работает, то ваша проблема заключается в том, как вам требуется MiniCard внутри Game

Ответ №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>