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

我仍在学习Vue.js，我有一个小问题： 我有一个带有一系列复选框的单个文件组件，我已经研究了使用多个复选框的方法，但是那里的示例要求我声明：

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

编辑但是，我已经在data（）中的

标记中的单个文件组件中设置了此选项，但它只是一次选中/取消选中所有框（但正确地反馈true/false）：

导出默认值{
名称：'PhrasesDetail'，
数据（）{
返回{
游戏：''，
语言：''，
核对措辞：{
el:'选择'，
数据：{
核对措辞：[]
}
}
}
},
... 

我已经组装了一个完整的示例（我对您的

语言.data

对象一无所知，所以我只是使用了伪数据）

{{index}}
{{checkedPhrasesar}}
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
//您的语言数据
语言：{
数据：{
关键一：“一”，
按键二：“二”，
关键三：“三”
}
},
//复选框显示数据
核对措辞：[]
}
}
}

注意复选框值与

：value=“keytranpair”

绑定。您可以将该值更改为所需的任何值。如果选中复选框，该值将添加到数组中

---

---

顺便说一句：您在

v-for

循环中使用

。因此id“selection”不会是唯一的。您最好在这里使用类而不是id。

我已经组装了一个完整的示例。（我对

语言.data

对象一无所知，所以我只是使用假数据）

{{index}}
{{checkedPhrasesar}}
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
//您的语言数据
语言：{
数据：{
关键一：“一”，
按键二：“二”，
关键三：“三”
}
},
//复选框显示数据
核对措辞：[]
}
}
}

注意复选框值与

：value=“keytranpair”

绑定。您可以将该值更改为所需的任何值。如果选中复选框，该值将添加到数组中

---

---

顺便说一句：您在

v-for

循环中使用

。因此id“selection”不会是唯一的。您最好在这里使用类而不是id。

您应该在js文件中启动Vue（

新Vue（{…}）

）。单文件组件用于组件。您不需要

新Vue（…）

code块。您已经将

checkedphrasesar

变量正确地添加到

data（）

函数中。@Schlangguru，当我刚刚有了它时，尽管它一次检查所有框，当我

{checkedphrasesar}时仍然输出null

@Schlangguru对问题进行了一点编辑-如果我的问题与

checkedPhrasesar:[]

-每当我选中一个复选框（选中所有复选框）时，我都会得到null，与我在问题中遇到的一样-我得到了true/false，但它仍然会同时选中/取消选中所有框我认为您获取的vue组件数据是错误的。

checkedPhrasesar

是您的视图模型。您希望在那里有一个数组，因此它应该是

checkedPhrasesar:[]

。您还需要在输入复选框中定义值。您应该在js文件中启动Vue（

new Vue（{…}）

）。单文件组件用于组件。您不需要

new Vue（…）

代码块。您已经将

checkedphrasar

变量正确添加到

data（）中了

函数。@Schlangguru，当我有了它时，虽然它一次检查所有的框，但当我

{checkedphrasesar}}

@Schlangguru编辑了一点问题-如果我有它，就像

checkedphrasesar:[]

-每当我检查一个框（它检查所有的框）时，我都会得到null值，与我的问题一样-我得到了真/假，但它仍然一次选中/取消选中所有框。我认为您获取的vue组件数据错误。

checkedPhraseSAR

是您的视图模型。您希望在那里有一个数组，因此它应该是

checkedPhraseSAR:[]

。您还需要在输入复选框中定义值。

<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>