くろおーかみ*てっく

しがないくろおーかみの勉強記

100DaysOfCode #26: Vue.js <script>直接組み込み(16) コンポーネントのv-modelでイベントが伝わらない(汗)

100DaysOfCode HTML JavaScript Vue

やったこと

今日の進捗のコードはコチラ。

github.com

きづいた(困った)こと: コンポーネントのv-modelでイベントが伝わらない

Vueのドキュメントコンポーネントの基本内のコンポーネントで v-model を使うでは、
そのとおり コンポーネントのタグで v-model を使って v-on v-bind を統合するテクニックが紹介されています。

カスタムイベントは v-model で動作するカスタム入力を作成することもできます。このことを覚えておいてください:

<input v-model="searchText">
これは以下と同じことです:

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"

勉強会でも「実は」と但し書きされるぐらい認知されていない？テクニックです。

Vueの v-model は v-bind と v-on を組み合わせた効果になる、というのは初耳で有用な話でした✨
https://y-mix.hateblo.jp/entry/2019/07/18/223422

v-bind相当はできたけどv-onが…

さて、このコンポーネントで v-model を使うの動きを確かめるために、次の点を考えて下記のコードを書きましたが正しく動作しません。

f:id:y-mix:20190730173706p:plain
作成してみた例

propsから値が渡っている(v-bindはできている)のですが、
console.log() が出ていないのでイベントが伝わらずに関数が呼ばれていない(v-on ができていない)状態です。

原因がわからないので保留です……

HTML

<div id="components-5">
  <h3>コンポーネントでv-modelを使う(v-on動作せず)</h3>
  <p>{{ censoredMessage }}</p>
  <custom-input v-model="censoredMessage"></custom-input>
</div>

JavaScript

Vue.component("custom-input", {
  props: ['inputtedValue'],
  template: `<input :value="inputtedValue" @input="$emit('onCustomInput', $event.target.value)"></input>`
});

new Vue({
  el: "#components-5",
  data: {
    censoredMessage: 'ここに検閲された入力値が表示されます'
  },
  methods: {
    onCustomInput: function (inputtedValue) {
      console.log('inputted');
      this.censoredMessage = "censored"
    }
  }
});