vuejsコンポーネントから入力値を変更する方法

Question

私はformに隠れた入力を持っています。私のデータの小さなリストがあります。ちょうどtitleとidです。このリストは、vueコンポーネントによって作成されます。このリストアイテムをクリックして、隠れた入力値に変更します。ここに私の構造があります。 HTML

<div id="v-account-select"> 

    <form method="post"> 
    {!! csrf_field() !!} 
    <input type="hidden" name="id" v-model="account_id"> 
    </form> 
    <account-select :datalist="{{ json_encode($list) }}"></account-select> 
</div> 

は、これは私のコードである

Vue.component('account-select', { 

     datalist: { 
      type: Array, 
      required: true 
     } 
    }, 
    methods: { 
     item_id_bind(id) { 

      this.$emmit("#account_id", id) 
     } 
    }, 
    template: 

     '<table class="table table-responsive table-striped table-bordered">' + 
     '<tbody>' + 

     '<tr v-for="item in datalist"><td>' + 

      '<button type="button" class="btn-link" v-on:click="item_id_bind(item.id)">{{item.title}}</button>' + 

     '</td></tr>' + 

     '</tbody>' + 
     '</table>' 
}); 

をAPP.JS。

Answer 1

イベントハンドラを追加します。 Vueのは

methods:{ 
    onAccountChange(id){ 
     this.account_id = id 
    } 
} 

を追加し、ここで

methods: { 
    item_id_bind(id) { 
     this.$emit("account_change", id) 
    } 
}, 

にコンポーネントを更新し、あなたの親で

<account-select @account-change="onAccountChange" :datalist="{{ json_encode($list) }}"></account-select> 

実施例です。

console.clear() 
 

 
Vue.component('account-select', { 
 
    props: { 
 
    datalist: { 
 
     type: Array, 
 
     required: true 
 
    } 
 
    }, 
 
    methods: { 
 
    item_id_bind(id) { 
 
     this.$emit("account-change", id) 
 
    } 
 
    }, 
 
    template:` 
 
    <table class="table table-responsive table-striped table-bordered"> 
 
     <tbody> 
 
     <tr v-for="item in datalist" :key="item.id"> 
 
      <td> 
 
      <button type="button" 
 
        class="btn-link" 
 
        v-on:click="item_id_bind(item.id)"> 
 
       {{item.title}} 
 
      </button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    ` 
 
}); 
 

 

 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    datalist: [{ 
 
     id: 1, 
 
     title: "item1" 
 
    }, { 
 
     id: 2, 
 
     title: "item2" 
 
    }], 
 
    account_id: null 
 
    }, 
 
    methods: { 
 
    onAccountChange(id) { 
 
     this.account_id = id 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <div id="v-account-select"> 
 

 
    <form method="post"> 
 
     Current Account id: {{account_id}} 
 
     <input type="hidden" name="id" v-model="account_id"> 
 
    </form> 
 
    <account-select @account-change="onAccountChange" :datalist="datalist"></account-select> 
 
    </div> 
 
</div>