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

【问题标题】：How to use new Vue in a single file component?如何在单个文件组件中使用新的 Vue？
【发布时间】：2017-10-23 08:40:40
【问题描述】：

我还在学习 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>

【问题讨论】：

你应该在一个 js 文件中启动 Vue (new Vue({ ... }))。单个文件组件适用于组件。
您只是不需要new Vue(...) 代码块。您已经将checkedPhrasesArr 变量正确添加到data() 函数中。
@Schlangguru 当我有这个时，虽然它会同时检查所有框并且当我 {{checkedPhrasesArr}} 时仍然输出 null
@Schlangguru 稍微编辑了这个问题 - 如果我像 checkedPhrasesArr: [] 一样拥有它 - 每当我选中一个框（选中所有框）时，我都会得到空值，我在问题中有什么 - 我得到真/假，但它仍然同时选中/取消选中所有框
我觉得你把vue组件的数据弄错了。 checkedPhrasesArr 是您的视图模型。你想在那里有一个数组，所以它应该是checkedPhrasesArr: []。您还需要在输入复选框中定义值。

标签： javascript checkbox vue.js

【解决方案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" 绑定。您可以将值更改为您想要的任何值。如果复选框被选中，这个值将被添加到数组中。

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

【讨论】：