时间戳

首页 > 解决方案 > vuejs 与以前的选择不同的 v-if

vue.js - vuejs 与以前的选择不同的 v-if

问题描述

我试图根据选择选项显示两个不同的 div，但我只得到第一个 v-if。当我选择“de”时，我确实得到了第一个 div 内容，但是当我选择 fr 而不是第二个 div 时，我也得到了它。

我无法理解这一点。关于我做错了什么的任何想法？

这在表单中进行：

    <select v-model="source" :key="source">
        <option :value="de">de</option>
        <option :value="fr">fr</option>
    </select><br><br>
<div class="characters">
    <div v-if="source === de" class="deChars" :key="source">
        <h5>Special German characters:</h5>
        <li v-for="character in deChars" :key="character">{{ character }}</li>
    </div>
    <div v-else-if="source === fr" class="frChars" :key="source">
        <h5>Special French characters:</h5>
        <li v-for="character in frChars" :key="character">{{ character }}</li>
    </div>
    <br>
</div>

在脚本部分，我使用了带有数据属性 source="" 的选项 api，以及 deChars 和 frChars 的两个数组。

注意：我添加的那些 :key="source" 是为了确保在源值更改时读取它。

数据属性：

    data(){
    return {
        original: "",
        translation: "",
        source: "",
        target: "en",
        deChars: ["ä", "Ä", "é", "ö", "Ö", "ü", "Ü", "ß"],
        frChars: ["à", "â", "ç", "é", "è", "ê", "ë", "î", "ï", "ô", "û", "ü", "œ"]
    }
},

太感谢了！

标签： vue.jsv-model

解决方案

尝试删除绑定符号，因为它似乎de并fr没有声明为属性，它们只是原始字符串：

  <select v-model="source" >
        <option value="de">de</option>
        <option value="fr">fr</option>
    </select>

然后v-if="source === 'de'"做v-else-if="source === 'fr'"

推荐阅读