Question

因此，我的应用上有一个类别系统，该系统在“功能卡”组件中设置。

然后将此“功能卡”放置在另一个“网格”组件中（并循环执行）。

我已经设法使用类似的方法将数据库中的数据通过数组传递到各个卡中-

"v-bind:featuredImage="resource.featuredImage"" （每个输入重复）

现在，我要使用条件逻辑添加类的类别div位于“功能卡”组件上。一切正常，如果我手动将数据交换为true / false，颜色就会改变。

但是，我希望使用基于真实数据的if语句将每种类型的数据更改为true / false。问题是，我的数据被放入“网格”组件，而我的类别div，类和计算数据在“功能卡”组件上。我想知道，我在哪里放置条件逻辑和类。我想像网格页面，这就是数据从何而来？但是我不知道如何在两者之间传递？

到目前为止，这是我的代码段：

这是我的“网格”组件。功能卡位于该组件中。

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

如您所见，在此页面上，我没有与此问题相关的逻辑。

这是功能卡组件 我正在尝试编辑的位-

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

（如果我在这里切换数据，我可以使我的类正常工作。这只是让他们根据Grid组件中的数据切换true / false的一种情况。

我希望我弄清楚我的问题是什么，不确定什么其他信息会很方便。

组件之间的对/错

0 个答案: