Question

所以我正在学习vue，花了一些时间浏览文档，但没有看到解决我问题的答案。这在很大程度上是由于使用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警告]：“数据”选项应该是一个在组件定义中返回每个实例值的函数。

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

display: none;

也可以。

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

Answer 2

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

在组件中，char *str; str = "Sometimes I feel like I'm going crazy.";键必须是一个函数，并且data函数返回的对象中的selected键的值必须是实际的布尔值{{1 }}或data（将是初始值）

true

默认情况下，v模型值被视为字符串，因此您的false和export default { name: 'CreateTournamentForm', data: function(e) { return { selected: true, } }, }值实际上是字符串true和false，它们都是真实的。将模板代码更改为以下代码（或使用数字或字符串值代替）应该可以解决

"true"

Answer 3

我通过将其从“ v-show”更改为“ v-if”来解决了

protected override void OnAuthorization(AuthorizationContext filterContext)
        {
            if (filterContext.HttpContext.User != null)
            {
                if (filterContext.HttpContext.User.Identity.IsAuthenticated)
                {
                    if (filterContext.HttpContext.User.Identity is FormsIdentity)
                    {
                        FormsIdentity id = (FormsIdentity)HttpContext.User.Identity;
                        FormsAuthenticationTicket ticket = id.Ticket;
                        string userData = ticket.UserData;
                        string[] roles = userData.Split(',');
                        HttpContext.User = new GenericPrincipal(HttpContext.User.Identity, roles);
                    }
                }
            }
        }

然后显示div如下：

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

将布尔值作为值传递给无线电组件时，为什么布尔值始终为真？

3 个答案: