vuejs 与之前的不同 v-ifs select

Question

我试图根据 select 选项显示两个不同的 div，但我只得到第一个 v-if。当我 select "de" 时，我确实得到了第一个 div 内容，但是当我 select 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>

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

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

数据属性：

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

非常感谢！

Answer 1

尝试删除绑定符号，因为 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'"

Answer 2

问题似乎出在 select 选项上。绑定似乎乱七八糟。一旦我摆脱了它，它就可以完美运行。所以感谢 Boussadjra。但是，如果在 v-if 上我将 de 和 fr 更改为字符串，则它不起作用。这就是我添加此评论作为解决方案的原因。

vuejs 与之前的不同 v-ifs select

vuejs different v-ifs from a previous select

vue.js

v-model