VueJs не может получить доступ к элементам за пределами моего созданного крючка - PullRequest
Новая
       4

VueJs не может получить доступ к элементам за пределами моего созданного крючка

0 голосов
/ 27 марта 2020

Я пытаюсь получить доступ к некоторым JSON данным, которые я загружаю во время создания, они загружаются в мой созданный хук, но когда я пытаюсь получить доступ к ним вне созданного хука, он ничего не возвращает. Журнал консоли, который выполняет 'ax ios load', показывает мой JSON, установленный внутри - нет. Есть идеи?

Вот мой код. 

data(){
            return{
                dataset: "",
                baseUrl: process.env.VUE_APP_BASE_URL
            }

        },
created() {
            console.log('Mounted: base URL',this.baseUrl);
            axios.get(this.baseUrl + '/mockdata/piemock.json').then(response => {
                this.dataset =response.data;
                console.log('axios load', this.dataset);
            })
                .catch(e => {
                    console.log('axios error', e)
                });
        },
        mounted() {
            // define data
            console.log("this.dataset", this.dataset);
            console.log("this.baseurl", this.baseUrl);
}

ОБНОВЛЕНИЕ Чтобы продолжить с тем, что AlexMA сказал в своем посте, вот новый код. журнал консоли, в котором говорится, что ax ios звонил, никогда не вызывается? 

data(){
            this.fakeAxiosCall()
                .then((theData) => (
                    console.log('axios called', theData),
                    this.dataset = theData
                ))
                .finally(() => (this.loading = false));
            return{
                dataset: "",
                baseUrl: process.env.VUE_APP_BASE_URL
            }

        },

methods: {
            fakeAxiosCall:  function() {
                return axios.get(this.baseUrl + '/mockdata/piemock.json')
            }
        },

ОБНОВЛЕНИЕ 2 (ФИНАЛЬНЫЙ РАБОЧИЙ ОТВЕТ)

То, что помогло AlexMA, составило 99% кстати, тогда отсутствовал оператор return внутри топора ios, а также бросок в catch для выброса ошибки. Вот окончательный код. Я дал ему чек на то, чтобы добраться до меня. Мне пришлось выписать полный URL-адрес, когда я получал эту странную ошибку, когда переменная baseUrl добавляла путь к нему внутри топора ios и получала, что в противном случае она не добавлялась, когда я делал консольный журнал вне этого вызова. Незначительная проблема, но в остальном это работает. 

 data() {
            this.fakeAxiosCall()
                .then((theData) => (
                    this.data = theData
                ))
                .finally(() => (this.loading = false));
            return {
                data: "",
                loading: true,
                baseUrl: process.env.VUE_APP_BASE_URL
            }
        },
        methods: {
            fakeAxiosCall: function() {
                 return axios.get('http://localhost:8080/mockdata/piemock.json')
                    .then(result => { console.log(result); return result; })
                    .catch(error => { console.error(error); throw error; });
            }
        },

1 Ответ

1 голос
/ 27 марта 2020

Я хотел бы поделиться некоторыми примерами кода, которые могут быть полезны, поскольку похоже, что вы пытаетесь выполнить DOM-манипуляцию, основываясь на том, когда данные готовы. Надеюсь, это полезно. Это небольшой пример комментария: «Вы уверены, что вам нужно избегать создания компонента, а просто скрывать шаблон компонента до загрузки данных?» 

var app = new Vue({
  el: "#app",
  data() {
    this.fakeAxiosCall()
      .then((theData) => (this.data = theData))
      .finally(() => (this.loading = false));
    return {
      data: "",
      loading: true
    };
  },
  methods: {
    fakeAxiosCall: function() {
      return new Promise((resolve) => {
         setTimeout(() => resolve("hello Vue"), 2000);
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="loading">Loading...</div>
  <div v-if="!loading">Data was loaded: "{{data}}"</div>
</div>
...