Question

我正在使用此代码构建v-复选框列表

<div class="row form-group" v-for="(author, key) in authorData" :key="key">
                <v-layout row wrap>
                  <v-flex xs1 sm1 md1 text-xs-center>                   
                    <div>
                      <v-checkbox
                        label
                        :key="author.PmPubsAuthorID"
                        v-model="authorData[key].checked"
                        v-bind:id="author.PmPubsAuthorID.toString()"
                        color="success"
                        @change="authorCBClicked(authorData[key])"
                      ></v-checkbox>
                    </div>

PmPubsAuthorID是一个类似于1047602的数字，并且是整个数据库中的序列号，没有2条记录是相同的。当我运行代码生成列表时，它可以正常工作，并且如果该值为true，则会显示一个复选框。我想做的是在

中选中一个复选框时

 authorCBClicked(author) {
    //PmPubsAuthorID = 1047602
      // alert(author.PmPubsAuthorID + " " );
  //    author.checked = false; does not work
  this.authorData[author.PmPubsAuthorID].checked = false; does not work
  this.authorData["1047602"].checked = false; does not work
  this.authorData[1047602].checked = false; does not work
  this.authorData[2].checked = false; does work

},

如您所见，我尝试了各种想法，唯一可行的想法是传递序数，但我无从得知。构建复选框时是否需要使用索引？

原因：我有一个复选框，然后在选中时调用一个对话框，询问他们“是否确定要将此项目添加到列表中”，如果他们说是，我希望选中原始复选框，但如果他们说不，那么原始复选框必须为false。我发现，如果我尝试将调用复选框的选中状态设置为false，则无法使用，但一旦在该方法之外也可以正常工作。我已将密钥和作者信息传递给了新对话框，并在需要时将其更改为false

感谢您的帮助。

Answer 1

只需将key而不是整个项目传递给您的方法：

@change="authorCBClicked(key)"

以及您的方法：

authorCBClicked(key) {
  this.authorData[key].checked = !this.authorData[key].checked;
}

或：

您可以直接在模板上进行操作：

 @change="author.checked = !author.checked"

使用Vue和Vuetify以编程方式设置v-checkbox

1 个答案: