如何在Vuejs中设置对象属性的计算值?

时间:2017-04-10 08:57:14

标签: vue.js

下面基本上是伪代码,它给出了我可能想要计算数据对象中引用的对象的属性值的上下文

<template lang="html">
    <section class="content">
        <div class="panel panel-default">
            <div class="panel-body">
                <form action="" @submit.prevent="onSubmit">
                    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>

                </form>
            </div>
        </div>
    </section>
</template>

<script>
import VueFormGenerator from 'vue-form-generator'
import Axios from 'axios'

export default {
    components: {
        "vue-form-generator": VueFormGenerator.component,
    },
    data() {
        return {
            model: {
                id: null,
                title: "",
                description: "",
                reviewerId: null
            },
            schema: {
              fields: [...]
            }
        }
    },
    created() {
      // get post to edit
      Axios.get(`/posts/10`)
        .then(response => {
          this.model = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    },
    computed: {
        // Assume reviewerId is based on some user action such as selecting from a dropdown list
        // The question is how to set the computed value for this.model.reviewerId
        model.reviewerId(){
            return 42; // this does not work
        } 
    }
}

设置计算值的正确Vuejs方法是什么?

1 个答案:

答案 0 :(得分:0)

如果您想使用下拉菜单选择它,请尝试v-modelhttps://jsfiddle.net/wostex/63t082p2/1/

如果您想通过某些事件更改数据属性(例如,单击按钮),请使用method。像这样@click="methodName"

调用此方法

如果您详细描述您的任务,我可以建议一个解决方案。

如果您出于某种原因绝对需要使用计算属性,则应阅读:https://vuejs.org/v2/guide/computed.html#Computed-Setter

无论如何,计算属性的名称应该与数据属性不同。