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建模时，会发生数据绑定。换句话说，你称之为v-model =＆＃34; object.property＆＃34;在输入上。当用户填写表单时，form.type的值将匹配表单输入。所以只需将表单对象更改为：

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

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

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

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

1 个答案: