Vue js如何选择数组中的项目

Posted 2023-02-16

【中文标题】Vue js如何选择数组中的项目

【英文标题】：Vue js how to Choice item in array

【发布时间】：2021-07-08 05:35:09

【问题描述】：

我有一个字母数组，我想制作它以便用户可以选择其中一个字母，然后当您单击名为“All”的按钮并发出警报时，名称所选字母的显示，这个结构看起来像这样

你也可以看看这个project in codesandbox

<template>
  <div>
    <div class="alphabet-container">
      <div
        class="alphabet-row"
        v-for="i in Math.ceil(alphabet.length / 6)"
        :key="i.id"
      >
        <span
          class="AlphabetLetters"
          :class="item"
          v-on:click="show(item)"
          v-for="(item, index) in alphabet.slice((i - 1) * 6, i * 6)"
          :key="index"
        >
           item  <br v-if="(index + 1) % 6 == 0" />
        </span>
      </div>
      <div class="alphabet-btn">
        <button>All</button>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default 
  data() 
    return 
      alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 
      'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    ;
  ,

  methods: 
    computed: 
      productChunks() 
        return _.chunk(Object.values(this.products), 4);
      ,
    ,
    show(item) 
      alert(item);
    ,
  ,
;
</script>

<style scoped>
   .B 
     border: 1px solid #74c8c5;
     border-radius: 5px;
   
</style>

【参考方案1】：

您可以添加像selectedAlphabet 这样的状态，其中包含选定的字母。 您的函数 show 会将 selectedAlphabet 设置为 item。

在您的 html 中，您可以添加一个条件类，如果 selectedAplhabet === item 可以添加边框：

       <span
          class="AlphabetLetters"
          :class="item"
          v-bind:class=" 'blue-border': item === selectedAlphabet " <--
          v-on:click="show(item)"
          v-for="(item, index) in alphabet.slice((i - 1) * 6, i * 6)"
          :key="index"
        >

【参考方案2】：

您可以像@Melvynx 建议的那样拥有selectedAlphabet 之类的状态。 并且您可以将您的点击事件从字母表移动到按钮。

<template>
  <div>
    <div class="alphabet-container">
      <div
        class="alphabet-row"
        v-for="i in Math.ceil(alphabet.length / 6)"
        :key="i.id"
      >
        <span
          class="AlphabetLetters"
          :class=" 'blue-border': item === selectedAlphabet "
          v-on:click="selectedAlphabet = item"
          v-for="(item, index) in alphabet.slice((i - 1) * 6, i * 6)"
          :key="index"
        >
           item  <br v-if="(index + 1) % 6 == 0" />
        </span>
      </div>
      <div class="alphabet-btn">
        <button :click="show()">All</button>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default 
  data() 
    return 
      selectedAlphabet: 'A',
      alphabet: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    ;
  ,

  methods: 
    computed: 
      productChunks() 
        return _.chunk(Object.values(this.products), 4);
      ,
    ,
    show() 
      alert(this.selectedAlphabet);
    ,
  ,
;
</script>

<style scoped>
.alphabet-container 
  width: 200px;
  margin: auto;
  max-width: 100%;


.alphabet-row 
  display: flex;
  justify-content: space-between;


.AlphabetLetters 
  font-family: "Second-Montserrat-Bold";
  cursor: pointer;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  padding: 10px;


.Z 
  display: flex;
  justify-content: flex-start;
  width: 100%;


.blue-border 
  border: 1px solid #74c8c5;
  border-radius: 5px;


.alphabet-btn 
  position: relative;


.alphabet-btn button 
  position: absolute;
  cursor: pointer;
  right: 0;
  bottom: 0;
  background: #74C8C5;
  padding: 8px 40px;
  border: none;
  outline: none;
  border-radius: 5px;
  color: #ffffff;

</style>

旁注：

我认为你可以取消父 div 上的循环 (alphabet-row) 并删除代码中的 slice 方法，没有它应该可以正常工作。如果您使用它来控制一行中出现多少个字母，则只需使用 css 即可。

编辑：

您还将computed 放入methods 中，这是不正确的。