2

我面临以下挑战，感谢您的任何意见：

从“App”中，当项目索引为奇数时使用“TestListItem”，当项目索引为偶数时使用“TestListBetterItem”。必须对两个组件使用相同的索引。

我尝试将我的两个独立子组件的键设置为等于奇数，另一个设置为偶数，但我收到重复键错误。我需要将两个子组件的交替值传递给共享的父组件。完整代码如下：

应用程序.vue

    <template>
  <div id="app">
    <test-list-item>
    </test-list-item>
    <test-list-better-item>     
    </test-list-better-item>
  </div>
</template>

          <!-- <template #title>
            I AM A HEADER
          </template> -->
          <!-- <template #footer>
          I AM A FOOTER
          </template> -->

<script>
import { TestBetterList, TestListItem, TestListBetterItem } from './components';


export default {
  name: 'App',
  components: { TestBetterList, TestListItem, TestListBetterItem },
  data() {
    return {
      items: ['better-item-1',  'better-item-2', 'better-item-3']
    };
  },
  //   watch: {
  //       'better-item-1': {
  //     handler: 'oddMethod',
  //     immediate: true,
  //     deep:true
  //   },
  //       'better-item-2': {
  //     handler: 'evenMethod',
  //     immediate: true,
  //     deep: true
  //   },
  //       'better-item-3': {
  //     handler: 'oddMethod',
  //     immediate: true,
  //     deep: true
  //   },
  // },
  methods: {

  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试列表项.vue

    <template>
  <div class="test-list-item">
        <template v-for="(item, index) in items">
      <slot>
        <div :key="index">{{ item }}</div>
      </slot>
    </template>
  </div>
</template>

<script>

export default {
  name: 'test-list-item',
  props: {

  },
  data() {
    return {
      items: ['better-item-1',  'better-item-2', 'better-item-3']
    };
  },
  computed: {
   
},
  mounted() {
  },
  created() {},

    //   methods: {
    //     oddMethod: function () {
    //     items[0]
    //   }
    // }

};
</script>

<style scoped lang="scss">
.test-list-item {
  color: purple
}


</style>

TestListBetterItem.vue

    <template>
  <div class="test-list-better-item">
    <template v-for="(item, index) in items">
      <slot>
        <div :key="index">{{ item }}</div>
      </slot>
    </template>

  </div>
</template>

<script>

export default {
  name: 'test-list-better-item',
  props: {

  },
  data() {
    return {
      items: ['better-item-1',  'better-item-2', 'better-item-3']
    };
  },
  computed: {
   
},
  mounted() {
  },
  created() {},

    //   methods: {
    //     evenMethod: function () {
    //     items[0]
    //   }
    // }

};
</script>

<style scoped lang="scss">
.test-list-better-item {
  color: rgb(255, 145, 0)
}


</style>
4

1 回答 1

1

我可能误解了您面临的任务，但在我看来，这与两种不同类型列表项的条件呈现有关，而不是与创建两个单独的列表有关。因此，当它引用那些是表示列表项TestListItem的组件时，包含列表的实际数组仍在组件中。因此，我首先使用这些名称创建两个单独的组件，然后应用and指令根据正在呈现的列表项的索引来选择要呈现的那些。TestListBetterItemAppv-ifv-else

<template> 
  <div id="app"> 
    <ul id="test-list"> 
      <li v-for="(listItem,listItemIndex) in testList"> 
         <TestListItem v-if="listItemIndex % 2 === 0" /> 
         <TestListBetterItem v-else /> 
      </li> 
    </test-list> 
  </div> 
</template>

我为你创建了一个 StackBlitz（虽然我使用了 Vue 3，但你可以轻松地将它迁移回 Vue 2）：

代码在这里

于 2021-03-23T22:03:39.083 回答