Laravel Vue.js Условный рендеринг

Question

Laravel Vue.js Условный рендеринг

Я новичок в 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>

Но ничего не происходит. Что я не прав?

0

laravel php vue.js

Решение

Другие решения

Вам нужно будет привязать первое поле к переменной с помощью v-model = «mailArchive», а затем во второй группе форм использовать v-show = «mailArchive! = ‘-‘»

0

Источник

Accepted Answer

Здесь многое предстоит решить. Во-первых, вы должны установить «родительский» экземпляр Vue, а не создавать новый экземпляр Vue для отдельных полей ввода. Например, допустим, вы хотите сделать всю форму экземпляром Vue, а затем, когда вы открываете форму, установите идентификатор, например, так:

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

Затем, когда вы создаете свой экземпляр Vue, укажите этот идентификатор:

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

2