渲染模板时遇到了一些问题。似乎来自主实例的数据不会转移到组件。
这是Vue代码:
Vue.component('country-list', {
template: `
<tr class=parent>
<country v-for="country in countryList">
<td>Render This</td>
</country>
</tr>
`,
props: ['countries'],
data() {
return {
countryList: this.countries
}
}
});
Vue.component('country', {
template: `<tbody class=parent><slot></slot></tbody>`
});
let App = new Vue({
el: '#app-container',
data: {
countries: []
},
created() {
this.getCountries()
},
methods: {
getCountries() {
var self = this;
axios.get('/admin/countries')
.then(function (response) {
self.countries = response.data.data;
})
.catch(function (error) {
console.log(error);
});
},
filterCountries() {
},
updateCountry(event) {
}
}
})
使用 country-list 模板的HTML代码:
<table class="table table-striped table-hover">
<thead>
<tr>
<td>
<input
type="text"
id="country-filter"
@keyup="filterCountries">
</td>
</tr>
<tr>
<td>Country Name</td>
<td>Visible</td>
<td>Order</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<country-list></country-list>
</tbody>
</table>
我在这里做错了什么?
答案 0 :(得分:1)
代码有几个问题。
country-list
组件。我已在下面的代码中更正了这些问题。我正在使用硬编码的国家/地区列表来获取要呈现的内容。
FWIW,我不知道你的country
组件打算做什么,因为你将它的内容传递到插槽中。
console.clear()
const countries = [
{
name: "USA",
visible: 1,
order: 1
},
{
name: "Germany",
visible: 1,
order: 2
},
{
name: "China",
visible: 1,
order: 3
},
]
Vue.component('country-list', {
template: `
<tbody>
<tr is="country" v-for="country in countryList" :key="country.order">
<td>{{country.name}}</td>
<td>{{country.order}}</td>
</tr>
</tbody>
`,
props: ['countries'],
data() {
return {
countryList: this.countries
}
}
});
Vue.component('country', {
template: `<tr class=parent><slot></slot></tr>`
});
let App = new Vue({
el: '#app-container',
data: {
countries: []
},
created() {
this.getCountries()
},
methods: {
getCountries() {
var self = this;
this.countries = countries
},
filterCountries() {
},
updateCountry(event) {
}
}
})
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app-container">
<table class="table table-striped table-hover">
<thead>
<tr>
<td>
<input
type="text"
id="country-filter"
@keyup="filterCountries">
</td>
</tr>
<tr>
<td>Country Name</td>
<td>Visible</td>
<td>Order</td>
<td>Actions</td>
</tr>
</thead>
<tbody is="country-list" :countries="countries"></tbody>
</table>
</div>