Question

temlate

   <bm-offer-confirm  inline-template>
      <select v-model="selectedCard">
           <option v-for="card in cards"
       v-bind:value="card.id">@{{card.info}}</option>
      </select>
   </bm-offer-confirm>

组件中的

module.exports = {

data() {
    return { 
      selectedCard: 0,
      cards: {},
    }
}

created(){
    Bus.$on('setCardsList', function (cards) {
        self.cards = cards;
        this.selectedCard = cards[0].id;
        //alert(this.selectedCard) shows 2 
   });
}

如果我在data（）中设置selectedCard：2它正常工作并且选择了选项，但在我的示例中它不起作用。选中的值为空（未选中），为什么？我只能选择手动选项。

你如何填写卡片对象？你在控制台中遇到任何异常吗？

不，这是在其他组件中发出的结果

created() {
    this.getCards();
},

methods: {
    getCards() {
        this.$http.get('/get-cards/')
            .then(response => {
                this.cards = response.data;
                Bus.$emit('setCardsList', this.cards);
            })
    },


 //The Bus is Vue object;
 //window.Bus = new Vue();

Answer 1

omg，我修好了

created(){

  var self = this; //add self link

  Bus.$on('setCardsList', function (cards) {
    self.cards = cards;
    self.selectedCard = cards[0].id; // before this.selectedCard = cards[0].id;
       //alert(this.selectedCard) shows 2 
   });
}

无法设置选择defaut值

1 个答案: