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>

APP.JS

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>'
});

这是我的代码。

Answer 1

添加事件处理程序。

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

在您的父Vue添加

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

并将您的组件更新为

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

这是一个有效的例子。

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>