0

I have the following code with a working method responsible for editing the title of selected list item (the key of the array object) using the input. How can I divide the list .items-list (without CSS) so that there are 3 items in one row, while my code with editing still works?

Vue.component('item-list', {
  template: '#item-list-template',
  data() {
    return {
      items: [{
          title: 'item 1'
        },
        {
          title: 'item 2'
        },
        {
          title: 'item 3'
        },
        {
          title: 'item 4'
        },
        {
          title: 'item 5'
        },
        {
          title: 'item 6'
        }
      ],
      activeIndex: -1,
    }
  },
  methods: {
    onItemClick(index) {
      this.activeIndex = this.activeIndex === index ? -1 : index;
    },
    setActiveItemValue(event) {
      const foundItem = this.items[this.activeIndex];
      if (!foundItem) return;
      
      return this.items[this.activeIndex].title = event.currentTarget.value;
    }
  },
  computed: {
    activeItemValue() {
      return this.items[this.activeIndex]?.title ?? '';
    }
  }
});

Vue.component('item', {
  template: '#item-template',
  props: {
    isActive: Boolean,
    title: String
  }
});

new Vue({
  el: '#app'
});
li.active {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <item-list></item-list>
</div>

<script type="text/x-template" id="item-list-template">
  <div>
    <input type="text" placeholder="Edit selected items" :value="activeItemValue" @input="setActiveItemValue" />
    <div class="items-col">
      <ul class="items-list">
        <item v-for="(item, i) in items" :key="i" :title="item.title" :isActive="activeIndex === i" @click.native="onItemClick(i)" />
      </ul>
    </div>
  </div>
</script>

<script type="text/x-template" id="item-template">
  <li class="item" :class="{ active: isActive }">{{ title }}</li>
</script>
<style>
    .items-list {
        display: flex;
    }
</style>
Ioann Sulyma
  • 31
  • 1
  • 6
  • Can you clarify how you want to create the rows? Do you want to wrap three items in an additional element? –  Nov 16 '21 at 12:52
  • @ChrisG, concept: `(ul.items-list > (item * 3)) + (ul.items-list > (item * 3))` etc. – Ioann Sulyma Nov 16 '21 at 12:56
  • 2
    Why "without CSS"? – maxshuty Nov 16 '21 at 13:24
  • Use a computed property that turns the items array into a two-dimensional array. Then use
      to iterate over the rows array, and iterate again over the row items inside.
    –  Nov 16 '21 at 13:33
  • Does this answer your question? [V-if inside v-for - display list of items in two columns](https://stackoverflow.com/questions/53075877/v-if-inside-v-for-display-list-of-items-in-two-columns) –  Nov 16 '21 at 13:35
  • @ChrisG yes, it's a similar question but when i try that solving, i have a problem with my selecting, see my next post – Ioann Sulyma Nov 16 '21 at 14:41
  • You cannot use `i` in your , you need `rowIndex * 3 + i` instead (as key, isActive and in the click handler) –  Nov 16 '21 at 15:59

0 Answers0