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

Question

嘿，我是一名前端开发人员，希望集成一些使用 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-model 一起工作。

任何有用的建议！

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

Answer 1

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