javascript - 为什么我的 bool 值在将其作为值传递给 radio 组件时始终为 true？

Question

所以我正在学习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 warn]: The "data" option should be a function that returns a per-instance value in component definitions.

我也知道 v-show 会切换显示，因此我尝试将 div 的显示设置为:

display: none;

也可以。

Answer 1

问题是 selected 的值是一个字符串，而您期望它是一个 bool 值。

以下观察者:

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 提供了一个字符串而不是 bool 值。要解决此问题，请编写 :value="true"，而不是 value="true"。

您可以使用一个实例 here .