I'm currently facing a challenge with implementing an external template in my ASP.NET MVC page that contains a Vue app. I've been trying to move the template section of this component to an external file, but so far, I have not been successful.
The code I have currently works fine, however, it is becoming difficult to maintain and build upon due to the loss of text editing features.
Here is the snippet of the code that is functioning as intended:
var foo = Vue.component('foo', {
template:'
<table class="table">
<template v-for="(foo, ColName, index) in foos">
<template v-if="index % 3 == 0">
<tr>
</tr>
</template>
<th>{{ColName}}</th>
<td v-if="foo">{{foo}}</td>
<td v-else> -- </td>
</template>
</table>',
data: function () {
return {
foos: null,
NumColuns: 3
}
},
mounted() {
axios
.get('/api/account/foo/')
.then(response => {
this.foos = response.data
})
.catch(error => {
console.log(error1)
this.errored = true
})
.finally(() => this.loading = false)
}
});
var foo = new Vue({
el: '#foo-vue'
});