vue.js - VueJS 有条件地显示多个输入字段

Question

我有一个“添加”按钮，它添加了一个选择框，当我在选择框中选择一个值时，我想显示一个输入字段，因此每次单击“添加”时它应该显示一个选择框，当我在我想显示一个输入字段。

我知道我可以使用“已选择”标志，但是当我已经添加了一个选择框时，这会将标志更改为 true，并在单击“添加”后立即显示输入字段，但我希望输入字段仅在值为时显示选择。

<template>
    <button @click="onBtnClick">Add<button>
    <select>...</select> # This gets added when 'Add' button is clicked
    <input v-if="selected" type="text" /> # This should show when a value is selected.
<select>
</template>

data(){
    return {
       selected: false
  }
},
methods: {
  onValueSelected(){
    this.selected = true
  }
}

你有什么想法我能做到这一点吗？

标签： vue.js

Answer 1

随意使用v-for新字段并将其推送到集合中。

new Vue({
  el: '#app',

  data() {
    return {
      goods: []
    }
  },

  methods: {
    addSelect() {
      let item = {
        id: this.goods.length,
        menus: [
          { value: '', text: '- select -' },
          { value: 1, text: 'Item 1' },
          { value: 2, text: 'Item 2' },
          { value: 3, text: 'Item 3' }
        ],
        input: {
          show: false
        }
      };

      this.goods.push(item);
    },
    
    showInput(item, e) {
      item.input.show = e.currentTarget.selectedIndex > 0;
    }
  }
})

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

<div id="app">
  <button @click="addSelect">Add to cart</button>

  <div v-for="item in goods" :key="item.id" class="goods">
    <select @change="showInput(item, $event)">
      <option 
        v-for="opt in item.menus" 
        :key="opt.key"
        value="opt.value">
        {{opt.text}}
      </option>
    </select>
    
    <input v-if="item.input.show" type="text" value="0" />
  </div>

</div>