显示每行项目 3 的列表并在点击时选择项目 - Vue.js

Question

我有两个任务：

1. 每行显示项目列表 3 个项目
2. 添加一个input 字段，用于编辑当前选定元素中的title 字段（应通过单击进行选择）。

所以，我基于这个解决V-if inside v-for - display list of items in two columns 做了第一个任务，现在我的第二个任务选择方法有问题。它应该适用于每个项目，但单击时会从每个列表中选择一个项目，并且只能从第一个列表中进行编辑。我认为这个问题可能出在onItemClick(index) 方法中，但不知道为什么。 对此有何想法？

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,
      rowArray: []
    }
  },
  mounted(){
      this.fakeFetchData();
  },
  methods: {
    // new method from example solving
    fakeFetchData(){
        var cloned = this.items.slice();
        while (cloned.length > 0) {
            let chunk = cloned.splice(0,3);
            this.rowArray.push(chunk);
        }  
    },
    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" v-for="(row, rowIndex) in rowArray" :key="rowIndex">
        <item v-for="(item, i) in row" :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>

Answer 1

我已经修改并将fakeFetchData() 从mounted 移动到内部computed 并修改了模板内部的v-for。看看吧

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,
      rowArray: []
    }
  },
  methods: {
    // new method from example solving
    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 ?? '';
    },
    fakeFetchData(){

        // ********* Changes done below ************

        var cloned = this.items.map((item, index) => { 
           return {title: item.title, id: index}
        });
        this.rowArray = [];
        while (cloned.length > 0) {
            let chunk = cloned.splice(0,3);
            this.rowArray.push(chunk);
        }  
        return this.rowArray;

        // ******* End of changes ********
    },
  }
});

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" v-for="(row, rowIndex) in fakeFetchData" :key="rowIndex">
        <!-- Changes done --><item v-for="item in row" :key="item.id" :title="item.title" :isActive="activeIndex === item.id" @click.native="onItemClick(item.id)" />
      </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>