javascript - 为什么没有显示v模型？在表单上处于编辑模式时需要显示值

嗨，我是一名前端开发人员，希望集成一些使用vue JS的后端数据，这对我来说是很新的。

我有一个表单，当用户单击“编辑”时，我正在显示相同的表单，但是我希望填充值。

这是相关的JS：

$(document).ready(function() {

    new Vue({
        el: 'body',

        data: {

            editMode: false,


            challenge: null,

            challenges: <%= raw @campaign.challenges.to_json(include: [:challenge_tags, :challenge_filters], methods: [:has_link, :encoded_link, :is_active, :contact_count, :total_clicks, :default_image, :completions, :total_targeted, :total_contacts]) %>,
        },

        methods: {

           edit: function(challenge) {
            this.editMode = true;
            this.challenge = challenge; **
           }
        }
    })
});

**这是一个建议，但似乎没有用。

这是HTML：

<input class="input" type="text" placeholder="challenge name" v-model="challlenge.name">

例如，这可以正常工作：

<span v-if="editMode">Edit</span>

使其与v模型一起使用是理想的。

任何有帮助的建议！

编辑：当我添加v-if =“ challenge.name”时，该字段没有显示，这告诉我也许没有访问数据？

最佳答案

如果您这样做v-if="challenges && challenges.name"，则在Challenges.name中有可用数据时，将显示该字段。