1

アプリのすべての選択に Vue2 コンポーネントを作成しようとしているので、必要に応じて後で簡単に変更できます!

私はドキュメントで与えられた例に基づいて調査を行いましたが、それを機能させるためにデータ属性のすべてのオブジェクトを特定する必要がある理由を理解するために頭を悩ませています!

次のコードは正常に動作していますが、変更すると動作しなく data: { record: { category_id: null } }なりdata: { record: {} }ます!

$data.record は ajax によってロードされると言わなければなりません... ajax リクエストの後にすべてを次のようなものに置き換えることを知っていても、常にオブジェクト全体を指定しますthis.record = response.dataか?

誰かが必要な場合は、FIDDLE [ https://jsfiddle.net/gustavobissolli/4xrfy54e/1/ ]があります。

編集：申し訳ありませんが、フィドルリンクを修正しました

Vue.component('select2', {
  props: ['options', 'value'],
  template: '#select2-template',
  data() {
    return {
      model: ''
    }
  },
  mounted: function() {
    this.model = this.value
  },
  watch: {
    value: function(value) {
      this.model = value
    },
    model: function(value) {
      this.$emit('input', value)
    },
  }
})

var vm = new Vue({
  el: '#el',
  template: '#demo-template',
  data: {
    record: {
      category_id: null
    },
    options: [{
      id: 1,
      text: 'Hello'
    }, {
      id: 2,
      text: 'World'
    }]
  }
})
<div id="el"></div>

<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <pre>{{ $data | json }}</pre>
    <select2 :options="options" v-model="record.category_id" value="record.category_id"></select2>
  </div>
</script>

<script type="text/x-template" id="select2-template">
  <select v-model="model">
    <option disabled>Select...</option>
    <option v-for="opt in options" :value="opt.id">{{ opt.text }}</option>
  </select>
</script>

4

1 に答える 1

2

まだ到着していない値を編集しようとしていますか? :-)

v-model="record.category_id"つまり、 「実行」された時点では何もありません。つまり、「record」オブジェクトに「category_id」がありません。したがって、それは何もバインドしません。これが、初期化select時に「category_id」を省略した場合に機能しない理由です。data

しかし、サーバーからデータが到着すると (ajax 呼び出し)、コンポーネントが機能しないという仮定は間違っています。

私はあなたのフィドルを更新しました: https://jsfiddle.net/4xrfy54e/4/

  1. まず、ボタンをクリックする前にドロップダウンを使用します。何もバインドされていないため、何も更新されません。正解です。

  2. では、ボタンをクリックしてください。this.recordボタンは、データがサーバーから到着したことをシミュレートしており、vm に割り当てられています。

  3. ドロップダウンをもう一度試してみてください。record.category_id が存在するため、バインディングは正常に機能しています。

「 Reactivity in Depth 」ドキュメンテーションページを読んでください。そうすれば、頭が混乱することはありません:-)

于 2016-10-13T12:36:41.733 に答える