Vuejs 2 如何按組件更新 v-model

Question

我想為 i-check 創建一個組件，但在表單提交期間我無法獲取 v-model 數據。

我可以通過普通輸入元素來做到這一點。

下面是一個例子。 謝謝

<!DOCTYPE html><html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/vue"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id=wrap>
  <ichecker id="test" checked  v-model="formData.checkbox"></ichecker>
    <!--<input type=checkbox checked v-model="formData.checkbox" />-->
    <button v-on:click.prevent=submit()>Submit</button>
  </div>
</body>
</html>




Vue.component('ichecker', {
props: ['id', 'checked'],
model: {
    prop: 'checked',
    event: 'change'
},
template: "<input type='checkbox' :id='id' />",
mounted: () => {
  // var $el = jQuery(`#${this.id}`);
  // $el.iCheck({.....
}
});

new Vue ({
  el: '#wrap',
  data: {
    formData : {
      checkbox : ''
    }
  },
  methods: {
    submit: function() {
      document.body.appendChild(document.createTextNode(this.formData.checkbox?'true ':'false '));
      // form submission
    }
  }
});

https://jsbin.com/jugerigeto/edit?html,js,輸出

Answer 1

您處於一個非常特殊的場景中，其中<input>本身就是組件的根元素。 所以如果你想監聽原生事件就不能使用 v-model，因為它只存在於 v-on 上。 v-model 只是一個捷徑，你可以像這樣輕松地做到這一點：

HTML：

<ichecker :checked="formData.checkbox"
    @change.native="formData.checkbox = $event.target.checked">
</ichecker>

JS：

Vue.component('ichecker', {
    prop: ['checked'],
    template: '<input type="checkbox" :checked="checked" />'
});

https://jsbin.com/suvoolita/edit?html,js,輸出

如果輸入不是您的根節點，您可能還想在沒有本機事件的情況下執行此操作。 或者你可能真的想要 v-model。 那里描述了在自定義組件上實現 v-model 的方法： https ://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model

Vuejs 2 如何按組件更新 v-model

問題描述

1 個解決方案

解決方案1
1 2017-04-25 15:31:17

Vuejs 2 如何按組件更新 v-model

問題描述

1 個解決方案

解決方案1 1 2017-04-25 15:31:17

解決方案1
1 2017-04-25 15:31:17