vue.js渲染包含vue.js語法

Vue.js版本是阿賈克斯的數據：2.x的vue.js渲染包含vue.js語法

嗨。我將vue js中的ajax請求發送到另一個頁面，並獲取包含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>

但這個鏈接無法呈現，無法正常工作！我正在測試渲染方法和一些有用的提示，但沒有找到方法。請幫助...謝謝

來源

2017-08-23 programmer

對我來說這聽起來像一個XY問題：是否有爲什麼你必須從你的API端點返回一個模板，而不是一個JSON，然後你加載到一個自定義組件？ – Terry

請假設這種方式是唯一的方式！從ajax請求返回的數據包含vue語法。但我沒有找到任何方式來呈現這些數據。這在某些情況下是非常有用的方法，並且非常重要。謝謝 – programmer

如果這是唯一的方法，那麼你可能需要重寫你的易耗品終點。當您只需傳遞數據並將內容交織到組件中時，傳遞模板字符串是沒有意義的。如果你以「只是按照我所告訴你的方式編寫代碼」的心態來到SO，那麼你就錯了。 – Terry

聽起來像你想要使用Async Component。

喜歡的東西...

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/[email protected]/dist/vue.min.js"></script>

爲例

來源

2017-08-24 00:32:42 Phil

謝謝，有什麼方法可以讓'/ media'變成動態的嗎？ – programmer

@ sgh370完全取決於它來自哪裏。在你的問題中，它是硬編碼 – Phil

爲什麼你的腳本不工作？沒有錯誤，但沒有工作 – programmer

@菲爾的答案是正確的，但在我的項目中需要改變。在這種情況下，更好的方法是：使用全局組件vs本地組件，因爲這項工作很簡單。

來源

2017-08-24 09:18:55 programmer

vue.js渲染包含vue.js語法

回答

相關問題