vue.js отображает данные ajax, которые содержат синтаксис vue.js

Vue.js версия: 2.x

Привет. Я отправляю ajax-запрос в vue js на другую страницу и получаю его источник, содержащий синтаксис vue.js, такой как события. Когда этот источник добавляется к свойству, а свойство добавляется в шаблон, источник данных ajax (который содержит синтаксис vue.js) не может быть обработан и не работает должным образом. Например шаблон это:

<div id="app">
    {{{ foo }}}
</div>

и app.js это:

var app = new Vue({
    el: '#app',
    data: {
        foo: 'bar'
    },
    mounted(){
        this.$http.get('/media').then(function(response){
            data = response.body;
            Vue.set(app, 'foo', data);
        });
    },
    methods: {
        alertVideoLink: function(event){
            alert(event.target.href);
        }
    }
});

В приведенном выше коде app.js ajax-запрос возвращает этот код (то есть response.body):

<a href="/media/videos" @click.pevent.self="alertVideoLink(event)">Video Link</a>

но эта ссылка не может быть предоставлена ​​и не работает должным образом! Я тестирую метод рендеринга и несколько полезных советов, но пути не найдено. Пожалуйста, помогите... Спасибо

Источник

2 ответа

Решение

Похоже, вы хотите использовать компонент Async.

Что-то вроде...

components: {
  'async-media': () => Vue.http.get('/media').then(res => ({
    template: res.body,
    methods: {
      alertVideoLink (event) {
        this.$emit('click', event)
      }
    }
  }))
}

Тогда в вашем шаблоне...

<async-media @click="handleClickEventFromChildComponent" />

Вот пример использования тайм-аута для фальсификации "загрузки" шаблона

var app = new Vue({
  el: '#app',
  data: {},
  components: {
    'async-media': () => new Promise(resolve => {
      setTimeout(() => {
        resolve({
          template: '<a href="/media/videos" @click.prevent.self="alertVideoLink($event)">Video Link</a>',
          methods: {
            alertVideoLink(event) {
              this.$emit('click', event.target.href)
            }
          }          
        })
      }, 2000)
    })
  },
  methods: {
    handleClickEventFromChildComponent (href) {
      console.info('Clicked on', href)
    }
  }
});
<div id="app">
  <p>Wait 2 seconds</p>
  <async-media @click="handleClickEventFromChildComponent" />
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

Источник

@ Фил ответ правильный, но в моем проекте нужно что-то менять. в этом случае лучший способ: использовать глобальные компоненты против локальных компонентов, потому что это просто для этой работы.

Источник
Другие вопросы по тегам