Vue.js セレクトボックスで選択したオブジェクトの中身を表示したい

Question

前提・実現したいこと

Vue.jsを使ってツールの制作を行っています。
https://codepen.io/ebifly/pen/RywWvg
上記のコードペンを見ていただけると分かりやすいと思うのですが
1.「名前を入力」→「追加」で入力した名前がセレクトボックスに追加される
2.リスト化されたものがセレクトボックスにも追加される
3.セレクトボックスで選ばれたものの「Status」が変更される
4.3と同時にセレクトボックスが消えて、選ばれたオブジェクトの内容が「選択されたのは[名前]Status:[ステータス]img:[イメージ番号]」の様に表示される
5.backボタンでセレクトボックスが現れてStatusが「a」に変更される
という動きを実装したいのですが、4,5の動きが上手くいかずアドバイスを頂きたいです。

発生している問題・エラーメッセージ

発生している問題としてはオブジェクトの内容が上手く表示出来ないというのと、backボタンでStatusの変更が行えないということです。

該当のソースコード

Vue.component('name-list',{
  template:'\
  <div>\
  <select v-if="!show" name="name-list" v-model="selected" @change="changeStatus">\
      <option value="">該当なし</option>\
      <option\
      v-for="(name, index) in names"\
      :value="name.id"\
      >{{ name.title }}\
      </option>\
    </select>\
    <p v-if="show">選択されたのは{{ names.title }}status:{{ names.status }} img:{{ names.img }}<button @click="changeBack">back</button></p>\
</div>\
  ',
  props: ['names'],
  data: function data() {
    return {
      selected: '',
      show: false,
    };
  },
  methods: 
    {
    changeStatus: function changeStatus(e){
    this.$emit('change-status', e.target.value);
    this.show = true;
    },
    changeBack: function changeBack(e){
    this.$emit('change-back', e.target.value);
    this.show = false;
    }
  }
 });

 var vm = new Vue({
   el: '#main',
   data: {
     newNameText: '',
     nextImg: 1,
     nextId: 0,
     names: []
   },
   methods: {
     addNewName: function () {
       if (this.newNameText !== '') {
         if (this.nextImg > 10) {
           this.nextImg = 1
         }
         this.names.push({
           img: this.nextImg++,
           id: this.nextId++,
           title: this.newNameText,
           status: 'a'
         })
       }
       this.newNameText = ''
     },
     updateName: function updateName(id, name){
      this.names[id].title = name
     },
     changeB: function changeB(id){
       this.names[id].status = 'b'
     },
     changeC: function changeC(id){
       this.names[id].status = 'c'
     },
     changeBack: function changeBack(id){
       this.names[id].status = 'a'
     }
   }
 })

vm.$mount('#main');

試したこと

<div>
  changeB
    <name-list
    :names="names"
    :title="names.title"
    :img="names.img"
    :status="names.status"
    @change-status="changeB"
    @change-back="changeBack"
    ></name-list>
</div>

 Vue.component('name-list',{
  template:'\
  <div>\
  <select v-if="!show" name="name-list" v-model="selected" @change="changeStatus">\
      <option value="">該当なし</option>\
      <option\
      v-for="(name, index) in names"\
      :value="name.id"\
      >{{ name.title }}\
      </option>\
    </select>\
    <p v-if="show">選択されたのは{{ title }}status:{{ status }} img:{{ img }}<button @click="changeBack">back</button></p>\
</div>\
  ',
  props: ['names', 'title', 'status', 'img']

上記の様にprops周りを書き換えても上手くいきませんでした_(:3 」∠)_
ご教授のほどよろしくお願いしますm(_ _)m

Answer 1

ざっと見てみましたが直すところは name-list だけで済みそうです。

まず表示部分ですが names は配列なので、現在選択している項目の id と一致する names の中の要素を取り出さなければなりません。
Array.prototype.find() を使えば一発で要素を取得できますが、後述する内容で添字が必要になるので、添字を取得して、その添字を使って要素を取得するようにます。

  computed: {
    selectedItem: function selectedItem() {
      // 選択項目の id と一致する names 配列の要素を取得
      return this.names[this.selectedIndex];
    },
    selectedIndex: function selectedIndex() {
      // 選択項目の id と一致する names 配列の添字を取得
      return this.names.findIndex(i => i.id === this.selected);
    },
  }, 

これで選択項目に該当する names の要素を表示する準備が整ったので、

<p v-if="show">選択されたのは{{ selectedItem.title }}status:{{ selectedItem.status }} img:{{ selectedItem.img }}<button @click="changeBack">back</button></p>\

のようにしてやります。

次に、ステータスの更新では、下記に示す親コンポーネントの changeB メソッド等を見れば分かるように、
選択項目の names 配列での添字を $emit で送る必要があります。

     changeB: function changeB(id){
       this.names[id].status = 'b'
     }

選択項目の names 配列での添字は最初に示したコードにて this.selectedIndex で取得できるようにしてありますので、

    changeStatus: function changeStatus(){
      this.$emit('change-status', this.selectedIndex);
      if (this.selectedIndex !== false) { // 該当なしの場合は表示しない
        this.show = true;
      }
    },
    changeBack: function changeBack(){
      this.$emit('change-back', this.selectedIndex);
      this.show = false;
      this.selected = ''; // 該当なしに選択状態を戻す
    },

このようになります。

それと、ステータスをプロパティにしてやれば、ステータスの数だけ更新用のメソッドが増えるようなことはなくなると思いますよ。v-model を使うともうちょっとスマートに書けると思います。

<name-list status="b" @change-status="changeStatus" .....></name-list>

this.$emit('change-status', this.selectedIndex, this.status);
this.$emit('change-status', this.selectedIndex, 'a'); // change-back -> change-status

changeStatus: function changeStatus(id, status){
  this.names[id].status = status
}

Comments

[ebiebifry]

丁寧な回答ありがとうございましたm(_ _)m
とても分かりやすく、無事実装することが出来ました！
statusをプロパティにすることで、メゾットを減らせたのは目からウロコでした。
本当にありがとうございました！