将复选框链接到 Vue.js 中的列表项

Question

我在“是/否（复选框）”类型的 Sharepoint 中有一个列表元素Scholarship 。

所以，我通过 Vue.js 创建了一个复选框：

<div class="row">
       <div class="d-inline col-lg-6 col-md-6 col-sm-6">
          <b>Scholarship Player</b>
       </div>
       <div class="d-inline col-lg-6 col-md-6 col-sm-6"> {{ this.players.Scholarship }} 
          <input type="checkbox" id="checkbox" v-model="Scholarship"> </div>
       </div>

我遇到的问题是它向我显示了复选框，并在它旁边显示“真”。 当我将列表元素更改为 false 时，它会显示“false”并且复选框将保持不变。 这意味着它没有将列表元素“奖学金”链接到复选框。

如何将我的列表元素与复选框链接/连接？ （这意味着当复选框被选中时，列表元素将为真，而当复选框未被选中时，它将为假）

Answer 1

通过查看代码，您显示的值与 v-model 不同。 此外，您不需要“这个”。 在模板部分。

<div class="d-inline col-lg-6 col-md-6 col-sm-6"> {{ players.Scholarship }} 
  <input type="checkbox" id="checkbox" v-model="players.Scholarship"> </div>
</div>