2

Vue 1.0.27 から Vue 2.0.1 に移行しようとすると、次の問題に直面します。

EDIT は、動作中の JSFidle を追加しました

状況：

(モデルから) タスクのリストを取得し、順序付けされていないリストに表示する非常に単純なアプリと、完了済みとしてフラグが付けられていないタスク (つまり、残りのタスク) の数を作成しました。ViewModel とモデルのコードを以下に示します。

 /*************
 *  ViewModel *
 * ***********/

var vm = new Vue({
    el: '#my-app',
    data: data
});


 /*************
 *    Model   *
 * ***********/

var data = {
    my_tasks: [
        {body: "Go to the doctor", completed: false},
        {body: "Go to the bank", completed: false},
        {body: "Go to the zoo", completed: false}
    ],
};

タスクのリストを表示するために、<task-list>カスタム コンポーネントを使用します。コンポーネント:

  • 小道具tasksを介してプロパティを持っています
  • 完了していないタスクの数を計算するという計算済みプロパティがありますremaining
  • 2つの方法がtoggleCompletedStatusあり、inProgress

カスタム コンポーネントのコードを以下に示します。

 /*****************
 *    Component   *
 * ***************/

Vue.component('task-list', {
    template: '#task-list-template',
    props: ['tasks'],
    computed: {
        remaining: function () {
            return this.tasks.filter(
                this.inProgress
            ).length;
        }
    },
    methods: {
        /**
         * Toggle the completed status of a task
         * @param item
         */
        toggleCompletedStatus: function (item) {
            return item.completed = !item.completed;
        },
        /**
         * Returns true when task is in progress (not completed)
         * @param item
         */
        inProgress: function (item) {
            return !item.completed;
        }

    },
});

<template id="task-list-template">
    <div>
        <h3>My tasks list ( {{ remaining }} )</h3>
        <ul>
            <li v-for="task in tasks" @click="toggleCompletedStatus(task)">
                {{ task.body }}
            </li>
        </ul>
    </div>
</template>

最後に、ディレクティブを使用して、コンポーネントのタスク プロパティをデータにバインドします。v-bind 

 /************
 *    View   * <-- works fine with both Vue 1.X and 2.x
 * **********/

div id="my-app">
    <task-list :tasks="my_tasks"></task-list>
</div>

問題：

タスク リストをインラインで渡そうとするとremaining、ユーザーがタスクをクリックしても、計算されたプロパティは更新されません。(つまり、 task.completed プロパティが変更されたとき)

 /************
 *    View   * <-- works in Vue 1.x, NOT working with Vue 2.x
 * **********/

div id="my-app">
    <task-list :tasks="[{body: "Go to the doctor", completed: false}, {body: "Go to the bank", completed: false}, {body: "Go to the dentist", completed: false}]"></task-list>
</div>

サーバーからデータを渡そうとすると、同じ問題が発生します。以下の例では、バックエンドで Laravel 5.3 を使用しています。

 /************
 *    View   * <-- works in Vue 1.x, NOT working with Vue 2.x
 * **********/

div id="my-app">
    <task-list :tasks="{{$tasks}}"></task-list> <!-- {{$tasks}} are the json encoded data from the server -->
</div>

どんな助けでも大歓迎

4

1 に答える 1

2

これは通常の動作です。小道具については移行ガイドを確認してみましょう: http://vuejs.org/guide/migration.html#Prop-Mutation-deprecated4

Vue 2.0 で動作するように更新された例を次に示します。

 /*****************
 *    Component   *
 * ***************/

Vue.component('task-list', {
    template: '#task-list-template',
    props: ['tasks-data'],
    data: function () {
    	return { tasks: [] };
    },
    computed: {
        remaining: function () {
            return this.tasks.filter(
                this.inProgress
            ).length;
        }
    },
    created: function () {
    	this.tasks = this.tasksData; // Set default properties
    },
    methods: {
        /**
         * Toggle the completed status of a task
         * @param item
         */
        toggleCompletedStatus: function (item) {
            return item.completed = !item.completed;
        },
        /**
         * Returns true when task is in progress (not completed)
         * @param item
         */
        inProgress: function (item) {
            return !item.completed;
        }
    }
});


 /*************
 *  ViewModel *
 * ***********/

new Vue({
    el: '#my-app'
});
<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<div id="my-app">
  <task-list :tasks-data="[{body: 'Hello all', completed: false},{body: 'Goodbye all', completed: false}]"></task-list> 
</div>

<!-- Template for custom component -->
<template id="task-list-template">
    <div>
        <h3>Remaining task {{ remaining }}</h3>
        <ul>
            <li v-for="task in tasks" @click="toggleCompletedStatus(task)">
                {{ task.body }}
            </li>
        </ul>
    </div>
</template>

ご覧のとおり、作成したフックのデータにタスクを設定して、Vue が変更をリッスンし、テンプレートを更新できるようにします。

于 2016-10-03T12:14:50.587 に答える