Как обновить содержимое страницы Vuejs2 при изменении опции выбора на наблюдаемой конечной точке api rxjs? - PullRequest
Новая
       8

Как обновить содержимое страницы Vuejs2 при изменении опции выбора на наблюдаемой конечной точке api rxjs?

0 голосов
/ 11 июня 2018

Я немного новичок в Vuejs2 и rxjs.Так что будьте добры ^ _ ^.У меня есть наблюдаемая конечная точка API.Я хочу изменить значение параметра "food_type" через выпадающий список на той же странице.Я хочу, чтобы при выборе элемента с помощью раскрывающегося списка значение параметра обновлялось, изменялась конечная точка и данные на странице перезагружались.Как мне этого добиться?

вот мой выпадающий список ...^

1 Ответ

0 голосов
/ 11 июня 2018

Похоже, вы ищете Watcher .

Это наиболее полезно, когда вы хотите выполнять асинхронные или дорогостоящие операции в ответ на изменение данных.

Это именно тот случай!

Проверьтенижеприведенный пример, который я подготовил для вас, используя JSONPlaceholder API. 

var app = new Vue({
  el: '#app',
  data: {
    postID: '',
    loading: false,
    postContent: null,
  },
  watch: {
    postID: function () {
      this.fetchPost()
    }
  },
  methods: {
    fetchPost: function(id) {
      this.loading = true;
      fetch('https://jsonplaceholder.typicode.com/posts/'+this.postID)
        .then(response => response.json())
        .then(json => {
          this.postContent = {
            title: json.title,
            body: json.body
          }
          this.loading = false;
        })
    },
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <select v-model="postID">
      <option value="" disabled>Select a post</option>
      <option value="1">Post #1</option>
      <option value="2">Post #2</option>
      <option value="3">Post #3</option>
      <option value="4">Post #4</option>
      <option value="5">Post #5</option>
    </select>
    <h2 v-if="loading">Loading...</h2>
    <div v-if="postContent" class="post_content">
      <h3>{{postContent.title}}</h3>
      <p>{{postContent.body}}</p>
    </div>
</div>

Как видите, наблюдатель следит за за любыми изменениями этого свойства и выполняет все, что вы ему сказали.В этом случае вызовите метод fetchPost и выполните выборку.

...