Question

假设我有一个带有<input>和''的表单。我想实现computed property来监视<input>，并且每次用户从<input>删除所有内容时，computed property应该将<select>返回到其默认状态。 / p>

代码如下：

<input class="form-control"/>
<select v-model="selectModel">
   <option>Please select</option>
   <option>Yes</option>
   <option>No</option>
</select>



<script>
 new Vue({
    el: '#app',
    data() {
       return {
          selectModel: '';
       }
    },
    computed: {
       input_empty: function() {
            var inp = getElementByClass('form-control');
            if (inp == '') {
                selectModel = "Please select";
            }
       }
    }
 })
 </script>

何时将触发此computed property？我当时以为，每次我在输入字段中键入内容或从中删除所有内容时，都会触发该事件，因此我在计算函数的第一行上放置了一个断点，但从未触发过该事件。

Answer 1

您可以查看输入的值，并且只要输入为空字符串，还可以重置selectModel：http://jsfiddle.net/eywraw8t/395052/

模板：

<div id="app">
  <input class="form-control" v-model="textInput" />
  <select v-model="selectModel">
     <option value="" disabled>Please select</option>
     <option value="Yes">Yes</option>
     <option value="No">No</option>
  </select>
</div>

Vue：

new Vue({
  el: '#app',
  data() {
    return {
        selectModel: '',
      textInput: 'input'
    }
  },
  watch: {
    textInput: function () {
      if(this.textInput.trim() === '') {
        this.selectModel = ''
      }
    }
  }
})

Answer 2

您还可以使用一种方法来完成所需的工作，并用@change包装您的输入，以便您可以使用代码来调用方法

html

<div id="app">
  <div class="container">
    <input class="form-control" v-model="myinput" @change="checkInput">
<select v-model="selectModel">
   <option value="Please select" seleceted>Please select</option>
   <option value="Yes">Yes</option>
   <option value="No">No</option>
</select>

  </div>
</div>

视频代码

var app = new Vue({
  el: '#app',
  data: () =>  ({
    selectModel: '',
    myinput: ''
  }),
  methods: {
    checkInput() {
      if (this.myinput === '') {
        console.log('here')
        this.selectModel = 'Please select'
      }
    }
  }
})

当要触发计算属性时，VueJS

2 个答案: