Question

我现在正在努力处理Vue.js。我有一个带有多个选项的select输入元素。每个选项的值都等于另一个输入元素的名称，我只想一次显示名称附加到所选值的输入元素。

这是我到目前为止所拥有的：

var app = new Vue({
  el: '#app',
  data: {
    selectedOption: ''
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- This select ust always be visible! -->
  <select v-model="selectedOption">
    <option value="testInput1">testInput1</option>
    <option value="testInput2">testInput2</option>
    <option value="testInput3">testInput3</option>
    <option value="testInput4">testInput4</option>
  </select>
  <!-- The folling elements must be toggled based on the selection above -->
  <input type="text" name="testInput1" value="testInput1" v-show="selectedOption === this.name" />
  <input type="text" name="testInput2" value="testInput2" v-show="selectedOption === this.name" />
  <input type="text" name="testInput3" value="testInput3" v-show="selectedOption === this.name" />
  <select name="testInput4" v-show="selectedOption === this.name">
    <option value="0">Yes</option>
    <option value="1">No</option>
  </select>
</div>

我猜这是由于this.name内部的v-show代码段引起的，但是我不知道如何在v-show中获得elements属性本身。是的，我用谷歌搜索，但是老实说，我对我应该在这里搜索什么没有真正的了解...

我想有一个非常简单的解决方案，但是我对Vue还是陌生的。

谢谢您的帮助！

Answer 1

您应在v-show处检查selectedOption是否符合value中的<option>。您可以像这样轻松完成。

var app = new Vue({
  el: '#app',
  data: {
    selectedOption: 'testInput1',
   
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- This select ust always be visible! -->
  <select v-model="selectedOption">
    <option value="testInput1">testInput1</option>
    <option value="testInput2">testInput2</option>
    <option value="testInput3">testInput3</option>
    <option value="testInput4">testInput4</option>
  </select>
  <!-- The folling elements must be toggled based on the selection above -->
  <input type="text" name="testInput1" value="testInput1" v-show="selectedOption === 'testInput1'" />
  <input type="text" name="testInput2" value="testInput2" v-show="selectedOption === 'testInput2'" />
  <input type="text" name="testInput3" value="testInput3" v-show="selectedOption === 'testInput3'" />
  <select name="testInput4" v-show="selectedOption === 'testInput4'">
    <option value="0">Yes</option>
    <option value="1">No</option>
  </select>
</div>

v-show：检查模型值是否等于元素名称

1 个答案: