Как я могу выполнить метод только один раз в Vue? - PullRequest
Новая
       25

Как я могу выполнить метод только один раз в Vue?

1 голос
/ 07 октября 2019

Я создаю веб-приложение, которое отображает продукты (вся информация о продукте поступает из базы данных), каждый продукт имеет кнопку More Details >>, при нажатии открывается модальное окно, которое содержит информацию об этом конкретном продукте. Файл js содержит функцию allRecords (), которая вызывается несколько раз, что делает вкладку «Сеть» в Inspection сумасшедшей. Я бы хотел, чтобы его называли только один раз. Я посмотрел на это: Как вызвать метод vue только один раз, а не каждый раз , и я не уверен, как я могу применить это к своему коду.

Это мой код ниже:

ФАЙЛ PHP 

<div id="myapp">
  {{ allRecords() }}
  <div class="content">
    <div class="nested" v-for="product in products">
      ...
    </div>
    <b-modal id="productModal" v-if="chosenProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="chosenProduct.Name">
      <div class = "inner-container">
        ...
      </div>
    </b-modal>
  </div>
</div>

ФАЙЛ JS 

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "",
    chosenProduct: null
  },
  methods: {
    allRecords: function(){ \\ This function here is being called multiple times
      axios.get('ajaxfile.php')
        .then(function (response) {
          app.products = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    chooseProduct: function (product) {
      app.chosenProduct = product
    }
  }
})

1 Ответ

3 голосов
/ 07 октября 2019

Согласно моему комментарию выше: вы можете выполнить запрос ajax в подключенном хуке компонента. Ваш обратный вызов уже устанавливает свойство products. Тогда нет необходимости вызывать {{allRecords()}} из шаблона, вы можете просто использовать products в своем цикле v-for.

Вот демонстрация подхода. Я поменял ваш php на API icanhazdadjoke для демонстрационных (и развлекательных) целей. 

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "loading dad joke...",
    chosenProduct: null
  },
  methods: {
    chooseProduct: function(product) {
      app.chosenProduct = product;
    }
  },
  created: function() {
    axios.get('https://icanhazdadjoke.com/search?term=dogs', {
      headers: {
        Accept: 'application/json'
      }
    })
    .then(function(response) {
      app.products = response.results;
    })
    .catch(function(error) {
      console.log(error);
    });
  }
})
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="myapp">
  <p v-for="product in products">
    {{product.joke}}
  </p>
</div>
...