javascript - 如何在父组件中解析数据

Question

我正在使用Vue v1.0.28和vue-resource调用我的 API 并获取资源数据。所以我有一个名为 Role 的父组件，它有一个子 InputOptions。它有一个foreach迭代 Angular 色。

这一切的大局是一个可以选择的项目列表，因此 API 可以返回预先选择的项目，因为用户之前保存/选择了它们。重点是我填不了selectedOptions InputOptions。我如何从父组件获取该信息？这是这样做的方法吗？

我在这里粘贴了一段代码，试图更好地展示我的问题:

Angular 色.vue

<template>
    <div class="option-blocks">
    <input-options
        :options="roles"
        :selected-options="selected"
        :label-key-name.once="'name'"
        :on-update="onUpdate"
        v-ref:input-options
    ></input-options>
    </div>
</template>

<script type="text/babel">
    import InputOptions from 'components/input-options/default'
    import Titles from 'steps/titles'

    export default {
        title: Titles.role,
        components: { InputOptions },
        methods: {
            onUpdate(newSelectedOptions, oldSelectedOptions) {
                this.selected = newSelectedOptions
            }
        },

        data() {
            return {
                roles: [],
                selected: [],
            }
        },

        ready() {
            this.$http.get('/ajax/roles').then((response) => {
                this.roles = response.body
                this.selected = this.roles.filter(role => role.checked)
            })
        }
    }
</script>

输入选项

<template>
    <ul class="option-blocks centered">
        <li class="option-block" :class="{ active: isSelected(option) }" v-for="option in options" @click="toggleSelect(option)">
            <label>{{ option[labelKeyName] }}</label>
        </li>
    </ul>
</template>

<script type="text/babel">
    import Props from 'components/input-options/mixins/props'

    export default {
        mixins: [ Props ],
        computed: {
            isSingleSelection() {
              return 1 === this.max
            }
        },
        methods: {
            toggleSelect(option) {
                //...
            },
            isSelected(option) {
                return this.selectedOptions.includes(option)
            }
        },

        data() {
            return {}
        },

        ready() {
            // I can't figure out how to do it
            // I guess it's here where I need to get that information,
            // resolved in a promise of the parent component
            this.$watch('selectedOptions', this.onUpdate)
        }
    }
</script>

Prop

export default {
    props: {
        options: {
            required: true
        },
        labelKeyName: {
            required: true
        },
        max: {},
        min: {},
        onUpdate: {
            required: true
        },
        noneOptionLabel: {},
        selectedOptions: {
            type: Array
            default: () => []
        }
    }
}

编辑

我现在在控制台中收到此警告:

[Vue warn]: Data field "selectedOptions" is already defined as a prop. To provide default value for a prop, use the "default" prop option; if you want to pass prop values to an instantiation call, use the "propsData" option. (found in component: <default-input-options>)

Answer 1

您使用的是 Vue.js 版本 2.0.3 吗？如果是这样，则不存在 http://vuejs.org/api 中指定的 ready 函数。您可以在组件的 created Hook 中执行此操作，如下所示:

// InputOptions component
// ...
data: function() {
    return {
        selectedOptions: []
    }
},
created: function() {
    this.$watch('selectedOptions', this.onUpdate)
}

在您的 InputOptions 组件中，您有以下代码:

this.$watch('selectedOptions', this.onUpdate)

但我无法看到 methods 中定义的 onUpdate 函数。相反，它是在父组件role中定义的。您可以插入一个 console.log("selectedOptions Updated") 来检查它是否按照您的预期被调用吗？我认为 Vue.js 期望方法出现在同一个组件中。

或者在上述情况下，我认为您可以在 this.$watch(...) 内执行 this.$parent.onUpdate - 我有的东西没有尝试过，但可能对你有用。

编辑:更多想法

您可能还会遇到一些问题 - 您正在尝试观察一个数组 - selectedOptions 这是一个有风险的策略。数组不会改变——它们就像对象列表的容器。但里面的个别物体会发生变化。因此，您的 $watch 可能不会触发 selectedOptions。

根据我迄今为止使用 Vue.js 的经验，我观察到当您添加或删除一个项目时，会注册数组更改，但当您更改单个对象时不会注册 - 您需要自行验证这一点。

要解决此问题，您可以为每个输入选项使用单独的组件 (input-one-option)，这样可以更轻松地观察更改。