При нажатии кнопки очистить отображаемый текст и вызвать другую функцию в VueJs - PullRequest
Новая
       60

При нажатии кнопки очистить отображаемый текст и вызвать другую функцию в VueJs

0 голосов
/ 09 ноября 2019

Я довольно новичок в веб-разработке и vue.js.

У меня есть приложение, в котором я ввожу идентификатор входа и нажимаю кнопку (поиск), он вызывает метод. Этот метод делает axios вызов контроллера и извлекает данные как объект. Эти данные отображаются в теге (не уверен, что этот подход верен).

После отображения этих данных, когда я второй раз ввожу другой идентификатор в поле и нажму кнопку, он по-прежнему отображает старый текстпока не получит новые данные. После получения новых данных отображаются новые.

Я хочу очищать эти данные каждый раз, когда нажимаю кнопку поиска, а также вызывать функцию vue для извлечения данных.

У меня естьпопытался очистить данные в начале вызова функции vue, но это не сработало. 

<input type="text" placeholder="Enter the ID" v-model="mId" />
<button type="button" class="searchgray" v-on:click="SubmitId">Search</button>
  <h4 style="display: inline">ID: {{queryData.Id}}</h4>
 <strong>Device Status:  </strong><span>{{queryData.deviceStatus}}</span>

<script>
export default {
components: {
  'slider': Slider,
  Slide
},
props:['showMod'],

data() {

return {
  mId '',
  queryData: {},

}
},
methods: {


  SubmitId: function () {
    this.queryData = {}
    axios.get('/Home/SearchId?Id=' + this.mId)
      .then(response => response.data).then(data => {
        this.queryData = data
      }).catch(err => {

        this.queryData = {}
        this.mId = ''
      alert(`No records found anywhere for the given mId`)

    });
  }
}
</script>

Итак, в приведенном выше коде, когда я нажимаю кнопку «Поиск», он вызывает функцию SubmitId и возвращает queryData. Теперь, когда я ввожу новый mId в поле ввода и нажимаю кнопку поиска, он продолжает отображать querydata, связанные со старым mId, до тех пор, пока выборка данных не будет завершена и не будут возвращены новые данные запроса для нового mId.

Iискал способ очистить текст на экране каждый раз, когда я нажимал кнопку. Поэтому я также попытался выполнить queryData = {} перед вызовом axios, но это не помогло.

Помощь приветствуется.

1 Ответ

1 голос
/ 09 ноября 2019 

new Vue({
  el: '#app',
  
  props: [
    'showMod'
  ],

  data() {
    return {
      mId: '',
      queryData: {}
    }
  },
        
  methods: {
    async SubmitId () {
      const axiosRequest = () => new Promise((resolve, reject) => {
        const obj = {
          Id: Math.random(),
          deviceStatus: Math.random()
        }
        
        setTimeout(() => {
          resolve(obj)
          // reject('Not Found')
        }, 2000)
      })
      
      try {
        this.queryData = {}
        this.queryData = await axiosRequest()
      } catch (err) {
        this.mId = ''
        alert('No records found anywhere for the given mId')
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input
    v-model="mId"
    type="text"
    placeholder="Enter the ID"
  />
  
  <button
    v-on:click="SubmitId"
    type="button"
    class="searchgray"
  >
    Search
  </button>
  
  </br>

  <h4 style="display: inline">
    ID: {{ queryData.Id }}
  </h4>

  </br>

  <strong>Device Status:  </strong>
  <span>{{ queryData.deviceStatus }}</span>
</div>
...