Question

我已经实现了如下的Kendo DropDownlist：

<kendo-dropdownlist v-if="PaymentTypeList != null" 
    name='PayType' 
    class="form-control" 
    v-model="vModel.PayType" 
    :data-text-field="'Text'" 
    :data-value-field="'Id'" 
    :auto-bind="true"
    :data-source="PaymentTypeList">
</kendo-dropdownlist>

我必须根据下拉列表中选择的值仅渲染下面的一个div。

   <div v-if="vModel.PayType == PaymentTypes.Cash">
       <div class="row">
          <div class="col-sm-3">
             <div class="form-group">
                <label>Pay Code
                <span class="text-red">*</span>
                </label>
                <input type="text" class="form-control" id="PayCode" name="PayCode" autocomplete="off" v-model="vModel.PayCode">
             </div>
          </div>
       </div>
    </div>
    <div v-else>
       <kendo-dropdownlist v-model="dropdownlistValue"
          :data-source="dataSourceArray"
          :data-text-field="'text'"
          :data-value-field="'value'">
       </kendo-dropdownlist>
    </div>

但是第一个div从未显示出任何虚假或真实的条件。

当我尝试使用v-show时，它可以正常工作。

如何使此代码能够在v-if上运行。

plunker实现在链接

上

https://plnkr.co/edit/Xbhm67KjnpovOWNBy2O2?p=preview

编辑：根据vue js

v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.

但是在我的情况下，当初始条件为真时，第一个div被渲染，之后第一个分割永远不会呈现为真或假的条件。

Answer 1

我建议您使用v-show解决此问题。 v-if是＆＃34;更好＆＃34;适合（不）渲染完全反对v-show的DOM，只是操纵DOM的显示（隐藏/显示）。

将你的Plunker分到这个：https://plnkr.co/edit/PjOhBbuTO6czxvQQ10da?p=preview（必须介绍＆＃34;空＆＃34;选择值）。

希望它有所帮助...

v-如果在下拉列值更改时不使用条件呈现

1 个答案: