2

Vue コンポーネントで Vuex を使用しています。コンポーネントに編集可能な静的フィールドがある場合、計算されたプロパティで簡単に処理できます。

computed: {
  text: {
    get() {
      return ...
    },
    set(value) {
      this.$store.commit...
    },
  },
},

<input type="text" v-model="text">

ただし、バインドする必要があるオプションのリストをレンダリングする場合、これはどのように行う必要がありますか?

options = [
  {
    value: ...,
    text: ...,
  },
  {
    value: ...,
    text: ...,
  },
  ...
];

<input type="text" v-model="option.text" v-for="option in options">
4

2 に答える 2

2

「addOption」、「editOption」などのオプションのミューテーションを定義する必要があります...

必要に応じて (ただし推奨)、 options コンポーネントを定義します。イベントをバインドしてミューテーションを呼び出します。

vuex が提供する簡単な例は、 https ://github.com/vuejs/vuex/tree/dev/examples/todomvc から入手できます。

特に todo コンポーネントに注目してください。todoリストからの単品担当です。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/Todo.vue

また、アプリ コンポーネントでリストを操作する方法についても説明します。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/App.vue

そして、これらは彼らの突然変異です。リスト アイテムを編集、追加、削除する方法をご覧ください。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/store/mutations.js

vuex ( vue + redux 方法論 ) に移行するには、考え方とアーキテクチャを変える必要があります。

于 2016-12-08T07:54:19.370 に答える
-1

前述のように、これらのオプションをvue インスタンスのデータとしてモデル化し、HTML で使用できます。

var vm = new Vue({
  data: {
     options: [
       {
         value: ...,
         text: ...,
       },
       {
         value: ...,
         text: ...,
       },
       ... 
     ]
  }
})

そしてHTMLで：

<input type="text" v-model="option.text" key="option.value" v-for="option in options">

各ノードの ID を追跡し、既存の要素を再利用して並べ替えることができるように、キー属性も追加しましたv-for。各アイテムに一意のキー属性を指定する必要があります。key の理想的な値は、各アイテムの一意の ID です。

于 2016-12-08T07:00:07.803 に答える