如何让我的复选框以 true 开头？答案

【问题标题】：How to make my check box start with true?如何让我的复选框以 true 开头？
【发布时间】：2021-05-01 02:18:39
【问题描述】：

我正在使用 boostrapvue 并且我的复选框默认为 false，我可以使用这些道具让我的应用显示默认为 true 吗？

<b-form-checkbox v-model="checked" autofocus="true" 
      name="AddVendcheck-button"  value="true" switch="true">
            </b-form-checkbox>

这是一个简单的问题，可能会被否决。但我在引导程序上没有看到任何类似的问题。你可以看到，我在所有的道具上都尝试了 true，但它仍然是 false..

【问题讨论】：

复选框的属性被“选中”。所以你需要做“checked='true'”
试过了，没用
v-model 表示它具有双向数据绑定。数据属性checked是否初始化为true？
Andrew 我是编码新手。不知道你在问什么。
基本上在您的 vue 组件中，您将复选框的布尔值绑定到 data property "checked".. 除非您初始化它，否则它将是未定义的，这在 JS 中是错误的。所以你需要将它初始化为true。在文档中count 被初始化为4，只需将count 替换为checked 并将4 替换为true。发布你有什么代码，我可以在你的代码中告诉你该怎么做。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

您应该将checked 值绑定到脚本中的data 属性，并使此输入具有反应性。我认为您应该尝试提高您对vue js 的理解，以便更好地理解bootstrap-vue。

这是解决您问题的代码 sn-p。

new Vue({
  el: "#app",
  data: function() {
    return {
      checked: true,
    }
  },
  methods: {
    toggle_checkbox() {
      this.checked = !this.checked
    }
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form-checkbox v-model="checked" switch="true" />
  <b-button @click="toggle_checkbox()">Toggle</b-button>
</div>

【讨论】：