True / False между компонентами - PullRequest
Новая
       9

True / False между компонентами

0 голосов
/ 01 декабря 2018

Итак, в моем приложении есть система категорий, которая установлена ​​в компоненте «Feature-Card».

Эта «Feature-Card» затем помещается (и повторяется в цикле) в другой компонент«Сетка».

Мне удалось передать данные из моей базы данных через массив в отдельные карты, используя что-то вроде этого -

"v-bind:featuredImage="resource.featuredImage"" (повторяется для каждого ввода)

Теперь категория div, в которую я хочу добавить класс с помощью условной логики, находится в компоненте «Feature-Card».Все работает, цвет меняется, если я вручную меняю данные на true / false.

Однако я хочу, чтобы данные менялись на true / false для каждого типа, используя операторы if на основе реальных данных.Проблема в том, что мои данные загружаются в компонент «Сетка», а мои категории div, классы и вычисленные данные находятся в компоненте «карта возможностей».Мне интересно, куда мне поместить условную логику и классы.Я представляю себе грид-страницу, откуда поступают данные?Но я понятия не имею, как проходить между ними?

Вот фрагмент моего кода:

Это мой "Grid" -компонент Feature-Карта находится в этом компоненте. 

<Template>
  <div class="grid-container">
    <!-- <div class="filter-container">
              <input type="text" v-model="search" placeholder="Search Finds">
    </div>-->
    <!-- <h1>This Is The Grid</h1> -->
    <div
      class="featured-card"
      v-for="resource in visibleResources"
      v-bind:visibleResources="visibleResources"
      v-bind:currentPage="currentPage"
      :key="resource.id"
    >
      <FeatureCard
        v-bind:featuredImage="resource.featuredImage"
        v-bind:resourceTitle="resource.resourceTitle"
        v-bind:resourcePrice="resource.resourcePrice"
        v-bind:creatorsName="resource.creatorsName"
        v-bind:creatorProfile="resource.creatorProfile"
        v-bind:creatorImage="resource.creatorImage"
        v-bind:downloadLink="resource.downloadLink"
        v-bind:resourceOriginalLink="resource.resourceOriginalLink"
        v-bind:resourceCategory="resource.resourceCategory"
      />
    </div>
  </div>
</Template>

Как видите, у меня нет логики, связанной с этой проблемой на этой странице.

Вот компонент Feature-Card Бит, который я пытаюсь отредактировать - 

<div v-bind:class="compClasses" class="category-tag">
  <h6 class="bold light">{{ resourceCategory }}</h6>
</div>

data () {
  return {
    desktop: false,
    mobile: false,
    icons: false,
    other: false,
  }
},
computed: {
  compClasses: function() {
    return {
      desktop: this.desktop,
      mobile: this.mobile,
      icons: this.icons,
      other: this.other
    }
  }
}

(Если я переключаю данные здесь, я могу заставить свои классы работать. Это просто случай заставить их переключать true / falseзависит от данных из компонента Grid.

Надеюсь, я ясно дал понять, в чем заключается моя проблема, но не уверен, какая другая информация будет полезна.

...