Question

我对此有些困惑。问题是我只需要在项目列表中选择（单击）一项即可。因此，在aaa> 1、2、3中，我可以选择1、2或3，但不能选择多个。然后里面bbb> 1，2，3一样。但是我无法弄清楚，因为最终结果应该是aaa> 1（选定），2、3 bbb> 1，2（选定），3等... 这是一个jsfiddle

https://jsfiddle.net/caliberdev/6c5xn8p9/

HTML：

 <div id="app">
  <ul>
    <li v-for="(item, key) in items">
      {{ item.value }}
      <ul>
        <li v-for="(v, i) in [1,2,3]" @click="activeItem(item.id, v)" :class="{active: ''}">{{ v }}</li>
      </ul>
    </li>
  </ul>
</div>

JS

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        value: 'aaa'
      },
      {
        id: 2,
        value: 'bbb'
      },
      {
        id: 3,
        value: 'ccc'
      },
      {
        id: 4,
        value: 'ddd'
      },
      {
        id: 5,
        value: 'eee'
      },
      {
        id: 6,
        value: 'fff'
      },
      {
        id: 7,
        value: 'ggg'
      },
    ]
  },
  methods: {
    activateItem(top_id, bot_id) {
      console.log(top_id);
      console.log(bot_id);
    }
  }
})

CSS

.active {
  color: white;
  background: black;
}

Answer 1

像这样，不知道这是否是你想要的

<ul>
    <li v-for="item in items">
        {{ item.value }}
        <input v-for="i in [1,2,3]" :name="item.value" type="radio" :value="i" v-model="item.active">
    </li>
</ul>

Answer 2

我建议直接在数据项中设置要激活的子元素之一。

data: {
items:  items: [{
    id: 1,
    value: 'aaa',
    active: [1]
  },
  {
    id: 2,
    value: 'bbb',
    active: [2]
  },
  {
    id: 3,
    value: 'ccc',
    active: [1, 2]
  },
  {
    id: 4,
    value: 'ddd',
    active: []
  },
  {
    id: 5,
    value: 'eee',
    active: []
  },
  {
    id: 6,
    value: 'fff',
    active: []
  },
  {
    id: 7,
    value: 'ggg',
    active: []
  }
]

}，

为了更加清楚，这是您提供的修改后的jsfiddle：jsfiddle

希望我有帮助：）

好吧，我认为您不明白您的问题，我编辑了jsfiddle，我保持了相同的逻辑，但是当您单击列表项时，您添加或删除了要设置为活动（或未设置为活动）的列表

VueJS如何在for循环中每行3个项目中仅选择一项？

2 个答案: