v-bindでのvalue値の操作について

Question

初期表示はsavedの値が表示されるselectの生成を行いたいのですが、optionのvalueを任意の形に変更しようとすると初期値が表示されなくなってしまいます。
:valueのfrom.id+'_'部分です。
どのように対応すればよいかご教示いただけますと幸いです。

<ul id=list>
  <li v-for="(sv, i) in saved">
    <select v-model="saved[i].name">
      <option v-for="from in froms" :value="from.id+'_'+from.name">{{from.name}}</option>
    </select>
  </li>
  <li>
    <input type="button" value="+" @click="addNewSaved">
  </li>
</ul>

const list = new Vue({
  el: '#list',
  data: {
    froms: [{name:"AAA",id:"1"}, {name:"BBB",id:"1"}, {name:"CCC",id:"1"}, {name:"DDD",id:"1"}],
    saved: [{name:"BBB",id:"2"},{name:"CCC",id:"3"}]
  },
  methods: {
    addNewSaved: function () {
      this.saved.push(this.froms[0]);
    }
  }
});

Answer 1

methodsまたはcomputedにメソッドを追加することで対応することは可能です。v-modelと一致しなくなるため、v-modelもメソッドを呼ぶ必要があります。

<ul id=list>
  <li v-for="sv in saved">
    <select v-model="processValueM(sv)">
      <option v-for="from in froms" :value="processValueM(from)">{{from.name}}</option>
    </select>
  </li>
  <li>
    <input type="button" value="+" @click="addNewSaved">
  </li>
</ul>

const list = new Vue({
  el: '#list',
  data: {
    froms: [{name:"AAA",id:"1"}, {name:"BBB",id:"1"}, {name:"CCC",id:"1"}, {name:"DDD",id:"1"}],
    saved: [{name:"BBB",id:"2"},{name:"CCC",id:"3"}]
  },
  methods: {
    addNewSaved: function () {
      this.saved.push(this.froms[0]);
    },
    processValueM: function(from){ // methodsにメソッドを追加する場合
      return from.id + '_' + from.name;
    }
  },
  computed: {
    processValueC: function(){  // computedにメソッド追加する場合
      return function(from) { // computedは引数なしで呼ばれるため、関数を返すことで対応
        return from.id + '_' + from.name;
      }
    }
  }
});

2017/2/28 更新
いろいろと試してみてほぼダメでした。とりあえず、<select>を子コンポーネントにして、選択時のイベントを拾い、親のsavedを更新するようにするというやり方で対応はできました。
検証ページ

<ul id=list>
  <li v-for="(sv, i) in saved">
    <select-component :selected="sv" :idx="i" />
  </li>
  <li>
    <input type="button" value="+" @click="addNewSaved">
  </li>
</ul>

const selectComponent = Vue.extend({
  data: function() { 
    return {
      froms: [{name:"AAA",id:"1"}, {name:"BBB",id:"2"}, {name:"CCC",id:"3"}, {name:"DDD",id:"1"}]
    }
  },
  props: [ 
    'idx',
    'selected'
  ],
  methods: {
    updateVal: function(a, b, c) {
      var selectedItem = this.froms.filter(v => v.name === this.$el.value)[0];
      this.$parent.saved[+this.idx] = selectedItem;
      // savedが更新されているか確認
      console.log('---');
      this.$parent.saved.forEach(v => console.log(v.id, v.name));
    }
  },
  template: '<select v-model="selected.name" @change="updateVal"><option v-for="from in froms" :value="from.name">{{from.name}}</option></select>'
});

const list = new Vue({
  el: '#list',
  data: function() { 
    return {
      saved: [{name:"BBB",id:"2"},{name:"CCC",id:"3"}]
    }
  },
  methods: {
    addNewSaved: function () {
      this.saved.push({ name:"AAA", id:"1" });
    },
  },
  components: {
    'select-component': selectComponent
  }
});

Comments

[Cziffra]

前回に引き続きありがとうございます！
まだvuejsといいますかjavascriptの考え方になれておらず、、

[Cziffra]

BAとさせて頂きました上記ですが、動作しないことが判明しました。

[Cziffra]

動作しないのは下記の二点です。

- 初期表示がされなくなった
- +を押したら選択したものが初期化されてしまう

二点目の初期化されてしまうのは別途methodを追加してsavedを選択した情報を動的に書き換える必要があるかと思いますが、@clickなどで対応するのでしょうか。試しにoptionで@clickを実装したのですがイベントを検出できませんでした。selectでは@clickでイベントを検出できましたが選択されているoptionの値を取得することができませんでした。

また一点目ですが、今回のように複数項目をコントロールする必要がある場合の処理の実装が思いつきません。

お手数をおかけしますがご確認をお願いできますでしょうか？