Question

也许我做错了，但是当将v-if绑定到两个不同的输入字段时，它只有在输入值没有改变时才有效。

var app = window.app = new Vue({
  el: '#admin-app',
  data() {
    return {
      language: "en"
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.common.js"></script>

<div id="admin-app">
  <select id="language" name="language" class="form-control" v-model="language">
    <option value="ro">Romanian</option>
    <option value="en">English</option>
  </select>


  <input type="text" class="form-control" value="Test RO" v-if="language == 'ro'" />
  <input type="text" class="form-control" value="Test EN" v-if="language == 'en'" />

</div>

只要其中一个输入字段发生了变化，v-if似乎就不再起作用了。虽然选择其他选项时“语言”值会发生变化。

Answer 1

VueJS似乎将内联输入值外推为需要绑定。我怀疑输入值绑定到语言道具。因此，一旦更改了值，您就无法再安全地评估if条件了。

解决方法是通过v-model为两个输入提供显式模型。这正确地允许您的条件显示和输入绑定。

var app = window.app = new Vue({
  el: '#admin-app',
  data() {
    return {
      language: "en",
      test1: "Test RO",
      test2: "Test EN"
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.common.js"></script>

<div id="admin-app">
  <select id="language" name="language" class="form-control" v-model="language">
    <option value="ro">Romanian</option>
    <option value="en">English</option>
  </select>


  <input type="text" class="form-control" v-model="test1" v-if="language == 'ro'" />
  <input type="text" class="form-control" v-model="test2" v-if="language == 'en'" />

</div>

Vue 2 v-如果输入改变后不工作

1 个答案: