在 Vue 2 中如何在 v-for 循环中只选中第一个输入类型复选框

Question

感谢您的关注，我有点想stuck.Trying弄清楚如何默认选中第一个复选框。

这是我的 JS，类别正在动态进入

Vue.component('category-filter', {
  template: '#category-filter-template',
  props: {
    appMounted: false,
  },
  data() {
    return {
      categories: {},
      checkedState: false,
    };
  },
  methods: {
    handleCheckboxClicked(e) {
      console.log({ e });
    },
  },
  mounted() {
    this.appMounted = true;
    this.categories =jsContext.categories
  },
});

这是我的模板，我选择将样式设为内联以使组件更易于重用

<div
  class="filter-container--wrapper"
  style="
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: #fff;
    background-color: #5676a7;
    border-radius: 5px;
  "
>
  <div
    id="filter-item"
    style="padding: 15px"
    v-for="category in categories"
    :key="category.id"
  >
    <input
      id="category-name"
      type="checkbox"
      @click="handleCheckboxClicked($event)"
      :value="category.id"
      :checked="checkedState"
    />
    <label for="category-name">
      <span>\{{category.name}}</span>
    </label>
  </div>
</div>

Answer 1

您应该在模型中设置真实来源，而不是在渲染中。

你应该有类似的东西

mounted() {
  this.categories[0].id=true;
}

但是，不清楚类别的结构是什么。它是一个数组吗？如果是这样，您应该将其初始化为空数组而不是对象。此外，如果您可能应该使用 v-model 而不是 :value 以便将选中状态的更改保存在模型中。最后，我不确定您是否希望将模型链接到 id 属性。可能还有另一个您要绑定的属性。

Answer 2

您可以在为模型设置数据时通过设置来初始定义选中的值：

this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v));

各种问题：

您应该使用模型而不是 :value，然后将模型更改为选中。
不要改变道具！
如果类别是数组，则将其设置为数据中的数组，而不是对象。
最好对内联样式使用计算属性，或者如果可能的话总是把它放在你的 CSS 文件或 <style> 中，如果你不这样做，你可以将它的范围限定在 #category-filter-template .filter-container--wrapper {} '希望它有冲突。

<template id="category-filter-template">
  <div class="filter-container--wrapper" :style="wrapperStyle">
    <div
      id="filter-item"
      :style="itemStyle"
      v-for="category in categories"
      :key="category.id"
    >
      <input
        id="category-name"
        type="checkbox"
        v-model="category.checked"
        :checked="category.checked"
      />
      <label for="category-name">
        <span>\{{category.name}}</span>
      </label>
    </div>
  </div>
</template>

那么你的组件：

Vue.component('category-filter', {
  template: '#category-filter-template',
  data() {
    return {
      categories: []
    };
  },
  computed: {
    wrapperStyle () {
      return {
      'display': 'flex',
      'flex-wrap': 'wrap',
      '-webkit-box-pack': 'center',
      '-ms-flex-pack': 'center',
      'justify-content': 'center',
      'margin-bottom': ' 2rem',
      'color': '#fff',
      'background-color': ' #5676a7',
      'border-radius': ' 5px'
      }
    },
    itemStyle () {
      return {
        'padding': '15px'
      }
    }
  },
  mounted() {
    this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v))
  },
})

查看在线工作：https://playcode.io/847454/

在 Vue 2 中如何在 v-for 循环中只选中第一个输入类型复选框

In Vue 2 how to have only 1st input type checkbox checked in v-for loop

javascript

css

vue-component

vuejs2