Question

我还在学习Vue.js，我有一个小问题：我有一个带有复选框数组的单个文件组件，我查看了documentation使用多个复选框，但这里的示例要求我声明：

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

编辑但是我已经在我的单个文件组件中将其设置在data（）中的<script>标记内，但它只是一次检查/取消选中所有框（但反馈为true） / false正确）：

<script>
  export default {
    name: 'PhrasesDetail',
    data () {
      return {
        game: '',
        language: '',
        checkedPhrasesArr: {
             el: '#selection',
             data: {
                 checkedPhrasesArr: []
             }
          }
      }
    },
... 
</script>

问题在哪里以及如何声明复选框数组以便它对个别元素做出反应/识别？

这些是我的复选框：

 <tr v-for="(keyTransPair, index) in this.language.data">
      <td id="selection"><input type="checkbox" :id="index" v-model="checkedPhrasesArr"></td>
      <td>{{index}}</td>
 ...
 </tr>

Answer 1

我已经完成了一个完整的例子。（我对language.data对象一无所知，所以我只是使用假数据。

<template>
  <div>
    <!-- Your Checkboxes -->
    <table>
      <tr v-for="(keyTransPair, index) in language.data">
        <td id="selection"><input type="checkbox" :value="keyTransPair" :id="index" v-model="checkedPhrasesArr"></td>
        <td>{{index}}</td>
      </tr>
    </table>

    <!-- Show the selected boxes -->
    {{ checkedPhrasesArr }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // Your language data
      language: {
        data: {
          keyOne: "one",
          keyTwo: "two",
          keyThree: "three"
        }
      },

      // The Checkbox data
      checkedPhrasesArr: []
    }
  }
}
</script>

注意，复选框值与:value="keyTransPair"绑定。您可以将值更改为您想要的任何值。如果选中该复选框，则该值将添加到数组中。

顺便说一句：您在<td id="selection">循环中使用v-for。所以id“选择”不是唯一的。你最好在这里使用一个类而不是一个id。

如何在单个文件组件中使用新的Vue？

1 个答案: