Vue.js 使用vuex Vuetify v-data-table。不在单元测试中呈现
vue 2.5.2 vuex 3.0.1 vuetify 1.0.16 我正在创建vuex+vuetify应用程序 渲染数据位于vuex存储区中。 它使用带分页的v-data-table 组件代码为Vue.js 使用vuex Vuetify v-data-table。不在单元测试中呈现,vue.js,pagination,vuejs2,vuex,vuetify.js,Vue.js,Pagination,Vuejs2,Vuex,Vuetify.js,vue 2.5.2 vuex 3.0.1 vuetify 1.0.16 我正在创建vuex+vuetify应用程序 渲染数据位于vuex存储区中。 它使用带分页的v-data-table 组件代码为 <template> <v-container> <v-text-field id="shopName" v-model="editedItem.name" required></v-text-field> <v-btn id
<template>
<v-container>
<v-text-field id="shopName" v-model="editedItem.name" required></v-text-field>
<v-btn id="save" color="blue darken-1" flat @click.native="save">save</v-btn>
<v-data-table :headers="headers" :pagination.sync="pagination" :items="shops" class="elevation-1">
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
</template>
<template slot="no-data">
<td>no item</td>
</template>
</v-data-table>
</v-container>
</template>
<script>
export default {
name: 'shop',
created () {
},
data () {
return {
pagination: {
sortBy: 'name'
},
headers: [
{
text: 'name',
align: 'left',
value: 'name'
}
],
editedItem: {name: ''},
defaultItem: {name: ''}
}
},
methods: {
close () {
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
}, 300)
},
save () {
this.$store.commit('addShop', this.editedItem)
this.close()
}
},
computed: {
shops () {
return this.$store.state.items
}
},
mounted () {
}
}
</script>
中的复制代码
我试着把我的问题变得更简单。 装载前生成存储数据,存在pagination.sync时不呈现
import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'
Vue.use(Vuetify)
describe('Shop.vue', () => {
it('uses store', () => {
// build component
store.state.items.push({name: 'AEON'})
const wrapper2 = mount(DataTable, {store})
expect(wrapper2.html()).toContain('AEON')
})
})
“使用同一存储”在分页中测试呈现的内容。我和1的NaN NaN解决了我自己的问题。哦,还没有解决,我输入了错误的代码。对不起。我将等待pull 3857的发布。
import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'
Vue.use(Vuetify)
describe('Shop.vue', () => {
it('uses store', () => {
// build component
store.state.items.push({name: 'AEON'})
const wrapper2 = mount(DataTable, {store})
expect(wrapper2.html()).toContain('AEON')
})
})