Question

我正在尝试创建一个列表，其中每个列表项都包含一个按钮，并且我希望用户能够单击多个按钮。我正在生成列表，如下所示：

    <ul>
      <li v-for="item in items" :key="item.id">
        <button type="button">{{item.title}}</button>
      </li>
    </ul>

但是我的代码存在的问题是，每当用户单击一个按钮时，它将其余按钮变为“未单击”。一直尝试使用focus和active的统计信息，但是即使仅使用CSS，我也无法启用多选。我确实设法更改了当前选定按钮的外观：

button:focus {
  outline: none;
  background-color: #6acddf;
  color: #fff;
}

知道如何允许单击多个按钮吗？

为了使事情更清晰，我稍后将创建一个AJAX调用，并在单击按钮的每个项目中传递item.id

Answer 1

如果可能，我宁愿避免更改数据结构

好吧，您必须将单击单击的 item所单击的位置存储在其中。

如果您无法编辑items数组，则始终可以创建一个新数组，例如isClicked，用于存储这些值。

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        title: 'foo'
      },
      {
        id: 2,
        title: 'bar'
      },
      {
        id: 3,
        title: 'baz'
      }
    ],
    isClicked: []
  },
  beforeMount() {
    // set all values to false
    this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
  },
  methods: {
    clicked(index) {
      // toggle the active class
      this.$set(this.isClicked, index, !this.isClicked[index])
    }
  }
})

.active {
  background: red
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <button @click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
  </div>
</div>

或者您可以使用vuex存储这些值。

但是，您可以使用Vues事件来操纵classList属性，例如：

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5, 6, 7]
  }
})

.active {
  color: red
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button v-for="i in items" @click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>

但是，恕我直言，是不对的。

您还可以使用cookies或localStorage存储这些状态。所以这完全取决于您。

Answer 2

将id属性用于列表项以使其唯一。

<ul>
    <li v-for="item in items" :key="item.id" :id="item.id">
        <button type="button" @click="doThis">{{item.title}}</button>
    </li>
</ul>


new Vue({
  el: '#app',
  data: {},
  methods: {
      doThis() { 
          // Use this to access current object
      }
  }
});

Vuejs多个活动按钮

2 个答案: