将单选按钮添加到 Laravel Spark - Vue 组件页面

Question

我试图尽可能远离 Spark 的 Vue 组件，但我发现我必须实现某些邮件设置，所以我不能再坚持太久了。

幸运的是，Spark 文档包含一个用于添加配置文件字段的小食谱： https://spark.laravel.com/docs/4.0/adding-profile-fields

大部分部分都在我的（有限的 PHP）舒适区内：

先刀片php：

邮件设置

      <div class="col-md-6">
        <label class="radio-inline"><input type="radio" value="profile" v-model="form.type" name="profile">Profile</label>
        <label class="radio-inline"><input type="radio" value="website" v-model="form.type" name="website">Website</label>
        <label class="radio-inline"><input type="radio" value="combined" v-model="form.type" name="combined">Combined</label>

        <span class="help-block" v-show="form.errors.has('mail-settings')">
          @{{ form.errors.get('mail-settings') }}
        </span>
      </div>
    </div>

集成：

 <!-- Update Mail settings -->
   @include('settings.profile.update-mail-settings')

从前面的代码块可以看出，我希望存储 3 个单选按钮的结果。 但是链接的 Vue js 文件让我很头疼：

Vue.component('update-mail-settings', {
    props: ['user'],

    data() {
        return {
            form: new SparkForm({
                profile: ''
                website: ''
                combined: ''
            })
        };
    },

    mounted() {
        this.form.mailsettings = this.user.mailsettings;
    },

    methods: {
        update() {
            Spark.put('/settings/profile/mail-settings', this.form)
                .then(response => {
                    Bus.$emit('updateUser');
                });
        }
    }
});

但是我到底如何将单选按钮集成到 SparkForm 中？

Answer 1

在 Vue 中，数据绑定发生在您按名称对对象进行 v-model 时。或者换句话说，您在输入上调用 v-model="object.property"。当用户填写表单时，form.type 的值将与表单输入相匹配。因此，只需将您的表单对象更改为：

 data() {
   return {
    form: new SparkForm({
        type: ''    <-  this can now be v-modeled to "form.type"
    })
  };
},

您的单选按钮不需要更改，因为它们已正确绑定：v-model="form.type"

https://vuejs.org/v2/guide/forms.html#Radio