处理 BootstrapVue 中的状态和无效反馈属性以拒绝输入字段中的已删除值

Question

有了下一个 BootstrapVue 示例代码，我想知道如何修复它以实现 ' 必填字段!' 消息在下一段显示：

用户输入值或选择建议的 'autocomplete' 个水果。
用户删除输入字段中的任何内容。
用户单击“测试”按钮。

模板：

<div>
  
  <b-form-group label="Fruit*" label-for="myInput" :invalid-feedback="invalidFruit" :state="stateFruit">  

    <b-form-input id="myInput" v-model="fruit" list="myList" :state="stateFruit"/>
        <datalist id="myList">
            <option v-for="fruit in fruits">{{ fruit }}</option>
        </datalist>
  
  </b-form-group>
  
  <b-button v-on:click="btnClicked=true">Test</b-button>
  
</div>

JavaScript:

{
  data() {
    return {
      fruit: null,
      fruits: ['Apple', 'Banana', 'Strawberry', 'Lemmon'],
      btnClicked: false
    }
  },
  computed: {    
        stateFruit() {
            var res = null;
            if (this.btnClicked) {
                res = (this.fruit != null || this.fruit == '');
            }
            return res;
        },
        invalidFruit() {
            var res = 'Mandatory field!';
            return res;
        },
  },
  methods: {
  }
}

https://codesandbox.io/s/u6j8m

谢谢！

Answer 1

找到的解决方案：

更改此行：

res = (this.fruit != null || this.fruit == '');

对此：

res = (this.fruit != null && this.fruit.length > 0);

处理 BootstrapVue 中的状态和无效反馈属性以拒绝输入字段中的已删除值

Handling state and invalid-feedback attributes in BootstrapVue to reject deleted value in input field

javascript

vue.js

vuejs2

bootstrap-vue