Laravel Vue.js 条件渲染

Question

我是 Vue.js 的新手，我只想在另一个表单 select 字段被 select 编辑时呈现表单元素。希望你明白我的意思。

这是我的 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>

只有当第一个 select 字段中的 'Gold'、'Silver' 或 'Bronze' 为 [=42 时，第二个表单组（标签：实例）才应该可见=]ed，但如果 'No' 是 selected 则不可见。

感谢您的帮助！

如履薄冰

// 更新

我为此编辑了我的代码

<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

您需要使用 v-model="mailArchive" 将第一个字段绑定到 var，然后在第二个表单组中使用 v-show="mailArchive !='-'"

Answer 2

这里有很多要解决的问题。首先，您应该设置一个 "parent" 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"']

你在这里做的是创造一些奇怪的东西 class。当您指定额外的 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 指令放入 class。相反，将其用作自己的 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/

Laravel Vue.js 条件渲染

Laravel Vue.js Conditional Rendering

php

laravel

vue.js