v-if 在下拉值更改时不使用条件渲染答案

【问题标题】：v-if not working with conditional rendering on Dropdown value changesv-if 在下拉值更改时不使用条件渲染
【发布时间】：2018-07-17 13:29:21
【问题描述】：

我已经实现了一个 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 被渲染，之后第一个除法永远不会被渲染，无论条件是真还是假。

【问题讨论】：

标签： kendo-ui vuejs2

【解决方案1】：

我建议您使用v-show 来解决此问题。 v-if 更适合（不）渲染 DOM，而 v-show 只是操纵 DOM 的显示（隐藏/显示）。

将你的 Plunker 分叉到这个：https://plnkr.co/edit/PjOhBbuTO6czxvQQ10da?p=preview（必须引入“空”选择值）。

希望对你有帮助...

【讨论】：