Require a name property in Vue components JS-0720
Required name property is not set
73<script>
74 import moment from 'moment';
75
76 export default { 77 data() { 78 return { 79 postId: null, 80 post: [], 81 currentRoute: null, 82 }; 83 }, 84 mounted() { 85 this.currentRoute = this.$router.currentRoute.name; 86 this.postId = this.$route.params.id; 87 88 this.viewPost(this.$route.query); 89 }, 90 watch: { 91 '$route.query' (newQuery, oldQuery) { 92 this.viewPost(newQuery); 93 } 94 }, 95 methods: { 96 viewPost(query) { 97 axios.get(`/api/posts/view/${this.postId}`, { params: query }) 98 .then(response => { 99 this.post = response.data.post;100 })101 .catch(error => {102 console.log('Error: ' + error);103 });104 },105 showDeleteDialog(id) {106 // $swal function calls SweetAlert into the application with the specified configuration.107 this.$swal({108 title: `Are you sure you want to delete #${id}?`,109 text: 'You won\'t be able to revert this!',110 type: 'error',111 showCancelButton: true,112 confirmButtonColor: '#d33',113 confirmButtonText: 'Yes, delete it!',114 cancelButtonText: 'No, cancel!',115 }).then((result) => {116 if (result.value) {117 this.deletePost(id);118 }119 })120 },121 deletePost(id) {122 axios.post(`/api/posts/delete/${id}`, {123 'id': id124 })125 .then(response => {126 this.$notify({127 group: 'default',128 type: 'success',129 text: response.data.message130 });131132 this.$router.push({ path: '/posts' });133 })134 .catch(error => {135 this.$notify({136 group: 'default',137 type: 'error',138 text: error.response.data.message139 });140 });141 }142 },143 filters: {144 moment: function (date) {145 return moment(date).format('YYYY-MM-DD, hh:mm:ss A');146 }147 }148 }149</script>
Required name property is not set
56<script>
57 import moment from 'moment';
58
59 export default { 60 data() { 61 return { 62 posts: [], 63 currentRoute: null, 64 defaultClass: { 65 id: '', 66 title: '', 67 created: '', 68 modified: '' 69 }, 70 queryParams: {} 71 }; 72 }, 73 mounted() { 74 this.currentRoute = this.$router.currentRoute.name; 75 76 this.getPosts(this.$route.query); 77 }, 78 watch: { 79 '$route.query' (newQuery, oldQuery) { 80 this.getPosts(newQuery); 81 } 82 }, 83 methods: { 84 getPosts(query) { 85 if (query.sort !== 'undefined' && query.direction) { 86 this.defaultClass[query.sort] = query.direction; 87 } 88 89 axios.get('api/posts', { params: query }) 90 .then(response => { 91 this.posts = response.data.posts; 92 this.queryParams = response.data.query; 93 }) 94 .catch(error => { 95 console.log('Error: ' + error); 96 }); 97 }, 98 showDeleteDialog(id) { 99 // $swal function calls SweetAlert into the application with the specified configuration.100 this.$swal({101 title: `Are you sure you want to delete #${id}?`,102 text: 'You won\'t be able to revert this!',103 type: 'error',104 showCancelButton: true,105 confirmButtonColor: '#d33',106 confirmButtonText: 'Yes, delete it!',107 cancelButtonText: 'No, cancel!',108 }).then((result) => {109 if (result.value) {110 this.deletePost(id);111 }112 })113 },114 deletePost(id) {115 axios.post(`/api/posts/delete/${id}`, {116 'id': id117 })118 .then(response => {119 this.$notify({120 group: 'default',121 type: 'success',122 text: response.data.message123 });124125 this.getPosts(this.$route.query);126 })127 .catch(error => {128 this.$notify({129 group: 'default',130 type: 'error',131 text: error.response.data.message132 });133 });134 }135 },136 filters: {137 moment: function (date) {138 return moment(date).format('YYYY-MM-DD, hh:mm A');139 }140 }141 }142</script>
Required name property is not set
25 import formSerialize from 'form-serialize';
26 import Errors from '../../helpers/FormErrors.js';
27
28 export default {29 data() {30 return {31 id: null,32 postUrl: '',33 title: '',34 description: '',35 errors: new Errors()36 };37 },38 mounted() {39 this.id = this.$route.params.id;4041 this.getPost(this.$route.query);42 },43 methods: {44 getPost(query) {45 axios.get(`/api/posts/edit/${this.id}`, { params: query })46 .then(response => {47 this.title = response.data.post.title;48 this.description = response.data.post.description;49 })50 .catch(error => {51 console.log(error);52 });53 },54 onSubmit(event) {55 let data = formSerialize(event.target, {56 hash: false,57 empty: true58 });5960 axios.post(`/api/posts/update/${this.id}`, data, {61 headers: {'X-Requested-With': 'XMLHttpRequest'}62 })63 .then(response => {64 // Redirect on success65 if (response.data.success) {66 this.$notify({67 group: 'default',68 type: 'success',69 text: response.data.message70 });7172 this.$router.push({ path: response.data.url });73 }74 })75 .catch(error => {76 this.$notify({77 group: 'default',78 type: 'error',79 text: error.response.data.message80 });8182 this.errors.add(error.response.data.errors);83 });84 }85 },86 }87</script>
Required name property is not set
25 import formSerialize from 'form-serialize';
26 import Errors from '../../helpers/FormErrors.js';
27
28 export default {29 data() {30 return {31 postUrl: '',32 title: '',33 description: '',34 errors: new Errors()35 };36 },37 methods: {38 onSubmit(event) {39 let data = formSerialize(event.target, {40 hash: false,41 empty: true42 });4344 axios.post('/api/posts/save', data, {45 headers: {'X-Requested-With': 'XMLHttpRequest'}46 })47 .then(response => {48 // Redirect on success49 if (response.data.success) {50 this.$notify({51 group: 'default',52 type: 'success',53 text: response.data.message54 });5556 this.$router.push({ path: response.data.url });57 }58 })59 .catch(error => {60 this.$notify({61 group: 'default',62 type: 'error',63 text: error.response.data.message64 });6566 this.errors.add(error.response.data.errors);67 });68 }69 },70 }71</script>
Required name property is not set
24<script>
25 import Sidebar from '../components/Sidebar.vue';
26
27 export default {28 components: {29 'sidebar': Sidebar,30 }31 }32</script>
Description
Name property in a SFC module is mostly a convenience for debugging. It's also helpful for recursion.
Bad Practice
<script>
export default {
}
<script>
export default {
notName: 'OurButton'
}
</script>
</script>
Recommended
<script>
export default {
name: 'OurButton'
}
</script>