Question

我是Vue.js的新手，我想只在选择了另一个表单选择字段时才渲染表单元素。我希望你明白我的意思。

这是我的Laravel表格：

<div class="form-group">
    {!! Form::label('mailarchive', 'Mailarchive: ', ['class' => 'col-sm-3 control-label']) !!}
    <div class="col-sm-6">
        {!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control']) !!}
    </div>
</div>

<div class="form-group">
    {!! Form::label('instance', 'Instance: ', ['class' => 'col-sm-3 control-label']) !!}
    <div class="col-sm-6">
        {!! Form::select('mailarchive', ['Select' => 'Select', '1' => 'SV01', '2' => 'SV02'], null, ['class' => 'form-control']) !!}
    </div>
</div>

第二个表单组（label：instance）只有在第一个选择字段中选择“Gold”，“Silver”或“Bronze”时才可见，但如果选择“No”则不可见。

感谢您的帮助！

Wipsly

//更新

我将我的代码编辑到了

<div class="form-group">
    {!! Form::label('mailarchive', 'Mailarchive: ', ['class' => 'col-sm-3 control-label']) !!}
    <div class="col-sm-6">
        {!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control v-model="mailarchive"']) !!}
    </div>
</div>

<div class="form-group v-show="mailarchive !='-'"">
    {!! Form::label('instance', 'Instance: ', ['class' => 'col-sm-3 control-label']) !!}
    <div class="col-sm-6">
        {!! Form::select('mailarchive', ['Select' => 'Select', '1' => 'SV01', '2' => 'SV02'], null, ['class' => 'form-control']) !!}
    </div>
</div>

这是我的javascript

<script type="text/javascript">
    new Vue({
        el: '#mailarchive'
    })
</script>

但没有任何反应。我错了什么？

Answer 1

在这里要解决很多问题。首先，您应该设置“父”Vue实例，而不是为各个输入字段创建新的Vue实例。例如，假设您想要将整个表单设为Vue实例，那么当您打开表单时，请设置如下ID：

{!! Form::open(['id' => 'example']) !!}

然后，在创建Vue实例时，引用该id：

<script type="text/javascript">
    new Vue({
        el: '#example'
    })
</script>

接下来，您拥有的此代码不正确：

{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control v-model="mailarchive"']) !!}

具体来说，请注意这一部分：['class' => 'form-control v-model="mailarchive"']

你在这里做的是创造一些奇怪的课程。指定额外的HTML属性时，需要传递这些属性的数组，如下所示：

{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control', 'v-model' => 'mailarchive']) !!}

从那里开始，另一个问题是你如何使用v-show。

这就是您所拥有的：<div class="form-group v-show="mailarchive !='-'"">

再一次，出于某种原因，你将v指令放在你的班级里面。相反，将它用作自己的HTML属性，如下所示：

<div class="form-group" v-show="mailarchive !== '-'">

所有这些在一起，你应该看到这样的东西：

{!! Form::open(['id' => 'example']) !!}
    <div class="form-group">
        {!! Form::label('mailarchive', 'Mailarchive: ', ['class' => 'col-sm-3 control-label']) !!}
        <div class="col-sm-6">
            {!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control', 'v-model' => 'mailarchive']) !!}
        </div>
    </div>
    <div class="form-group" v-show="mailarchive !== '-'">
        {!! Form::label('instance', 'Instance: ', ['class' => 'col-sm-3 control-label']) !!}
        <div class="col-sm-6">
            {!! Form::select('mailarchive', ['Select' => 'Select', '1' => 'SV01', '2' => 'SV02'], null, ['class' => 'form-control']) !!}
        </div>
    </div>
    {!! Form::submit() !!}
{!! Form::close() !!}
</div>
<script>
new Vue({
    el: '#example'
});
</script>

以下是jsfiddle的一个工作示例：http://jsfiddle.net/zj8hwjc9/1/

Answer 2

您需要将第一个字段绑定到var，其中v-model =＆＃34; mailArchive＆＃34;然后在第二个表格组中使用v-show =＆＃34; mailArchive！=＆＃39; - ＆＃39;＆＃34;

Laravel Vue.js有条件渲染

2 个答案: