Question

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

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

<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
  }
}

您对我如何实现这一目标有任何想法吗？

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>

Answer 2

我发现我可以渲染一个新组件并将其传递给道具。每次呈现新组件时，默认情况下它都会获得selected标志为false，然后可以通过在选择框中选择一个值来对其进行更改。

<b-form-group 
    v-if="element.elementName === 'Some value'"
    label="Select field *:"
    label-for="benefitSelectField">
    <SalaryField :element="element" />
</b-form-group>

SalaryField组件

<template>
  <div>
    <select @change="onValueSelected" ></select>
    <input v-if="selected" type="text" />       
  </div>
</template>
<script>
  export default {
    props: {
      element: Object
    },
    data(){
      return {
        selected: false,
      }
    },
    methods: {
      onValueSelected() {
        this.selected = true
      }
    }
  }
</script>

VueJS有条件地显示多个输入字段

2 个答案: