为什么我的布尔值在将它作为值传递给无线电组件时总是为真？答案

【问题标题】：Why is my boolean always true when passing it as value to a radio component?为什么我的布尔值在将它作为值传递给无线电组件时总是为真？
【发布时间】：2019-01-07 17:04:59
【问题描述】：

所以我正在学习 vue，并且花了一些时间浏览文档，但还没有看到解决我问题的答案。这在很大程度上是由于使用 CLI（我是）与不使用 CLI 之间的命名法。

我正在尝试使它在单击一个单选按钮时显示一个 div，而当单击另一个单选按钮时显示另一个。这是我所拥有的。

模板：

<div id="daySelection">
    <div class="o-m-day">
        <div id="oneDay">
            <p>One day?</p><input v-model="selected" type="radio" name="oneDay" id="" class="r-button" value="true"> 
        </div>
        <div id="multipleDays">
            <p>Multiple days?</p> <input v-model="selected" type="radio" name="multDays" id="" class="r-button" value="false">
        </div>
    </div>
    <!-- the div where the conditional render will be rendered -->
    <div>
        <!-- multiple days -->
        <div v-show="selected" id="ta-multDays">
            <textarea  rows="10" cols="80" name="multDays" type="text" />
        </div>
        <!-- one day -->
        <div v-show="!selected" id="i-oneDay">
            <input type="text" name="r-oneDay">
        </div>
    </div>
</div>

这是脚本：

export default {
    name: 'CreateTournamentForm',
    data: function(e) {
        return {
            selected: Boolean,
        }
    },
}

上面我在控制台中收到一个错误，说数据需要是一个返回新实例的函数。我看到很多人和例子在不同的地方使用 vue 实例：

const app = new Vue({
    el: '#app',
    data: {
        selected: true,
    }
});

但是，每当尝试这个 Vue 时，都会向我发送一个警告，说它需要是一个函数。

[Vue 警告]：“data”选项应该是一个在组件定义中返回每个实例值的函数。

我也知道 v-show 会切换显示，所以我尝试将 div 的显示设置为：

display: none;

也没有。

【问题讨论】：

这可能是一个细节，但我建议在您的情况下使用v-if 和v-else 而不是v-show。这样，如果您需要更改条件，您将只需要编辑 1 行而不是 2 行，如果条件变长，代码会更简单。

标签： javascript vue.js

【解决方案1】：

问题在于selected 的值是一个字符串，而您希望它是一个布尔值。

以下观察者：

watch: {
    selected(newValue) {
        console.log("selected changed to", newValue, "which is a", typeof newValue);
    }
}

会告诉你这个：

selected changed to true which is a string 
selected changed to false which is a string

原因是你给字段value 一个字符串而不是布尔值。要解决这个问题，不要写value="true"，而是写:value="true"。

你可以玩一个活生生的例子here。

【讨论】：

谢谢，在您发布帮助之前我已经知道了一点，但谢谢。我认为使用带有类型转换的绑定但在玩弄它之后我发现它是一个字符串。非常感谢您的帮助！！！

【解决方案2】：

据我所知，这里有两个问题：

在组件中，data 键必须是函数，data 函数返回的对象中 selected 键的值必须是实际布尔值 true 或 false（即将是初始值）

export default {
  name: 'CreateTournamentForm',
  data: function(e) {
      return {
        selected: true,
    }
  },
}

默认情况下，v-model 值被视为字符串，因此您的true 和false 值实际上是字符串"true" 和"false"，它们都是真实的。将您的模板代码更改为以下（或者使用数字或字符串值）应该可以修复它

<div v-show="selected === 'true'" id="ta-multDays">
    <textarea  rows="10" cols="80" name="multDays" type="text" />
</div>

【讨论】：

【解决方案3】：

我通过将它从“v-show”更改为“v-if”解决了这个问题

<div>
    <p>One day?</p>
    <input 
        v-model="selected" 
        type="radio" 
        name="oneDay" 
        id="oneDay" 
        class="r-button" 
        value="onlyOneDay" /> 
</div>
<div id="multipleDays">
    <p>Multiple days?</p> 
    <input 
        v-model="selected" 
        type="radio" 
        name="multDays" 
        id="multDays" 
        class="r-button" 
        value="multipleDays" />
</div>

那么要显示的div如下：

<div v-if="selected === 'multipleDays'" id="ta-multDays">
    <textarea  rows="10" cols="80" name="" type="text" />
</div>

<div v-if="selected === 'onlyOneDay'" id="i-oneDay">
    <input type="text" name="">
</div>

【讨论】：