Return to Answer

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

(削除) I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li>. What is that used for? (削除ここまで)Edit: Oh yes, thanks for reminding me about the key attribute for list editing

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

(削除) I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li>. What is that used for? (削除ここまで)Edit: Oh yes, thanks for reminding me about the key attribute for list editing

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li> . What is that used for? Edit: Oh yes, thanks for reminding me about the key attribute for list editing

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

(削除) I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li> . What is that used for? (削除ここまで)Edit: Oh yes, thanks for reminding me about the key attribute for list editing

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li>. What is that used for?

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.

It looks like the code makes good use of basic VueJS concepts and practices- using computed properties, binding values, conditional display with v-if, etc.

I also like the application of arrow functions, promise handling, etc.

I see there is a key attribute bound to the list items (i.e. v-bind:key="wrestler.id"). Correct me if I am wrong but that doesn't appear to be an attribute of <li>. What is that used for?Edit: Oh yes, thanks for reminding me about the key attribute for list editing

Then in the addWrestler() method, there are two .then() callbacks. Is there a reason not to move the three lines in the second callback into the first?

axios.get(this.action, { name: this.name })
 .then((response) => {
 this.wrestlers.push(response.data.data);
 this.busy = false;
 this.name = '';
 this.$refs.name.focus();
 })
 .catch(...)

If you really wanted to shorten the code for the promise callbacks, you could abstract those into methods.