小编CIC*_*ons的帖子

我想知道是否有任何Yii2专家可以帮助我理解如何最好地使用ajax表格结合Yii ajax验证.我想我可以解释这个问题,而无需通过我的所有代码.

我正在使用促销代码表单,用户在表单中输入促销代码,表单通过ajax提交.然后,我们对促销代码详细信息执行数据库查找,验证代码,如果代码验证,我们希望显示隐藏在页面上的注册表单.

我有一个表单字段"code"的自定义验证函数,它是名为"register"的模型场景中的活动字段.

class UserCode extends ActiveRecord
{
    ... 

    public function scenarios()
    {
        return [
            'register' => ['code'],
        ];
    }

    public function rules()
    {
        return [
            [['code'], 'required'],
            [['code'], 'validateUserCode', 'on' => ['register']],
        ];
    }

    public function validateUserCode($attribute, $params)
    {
        // perform all my custom logic to determine if the code is valid

        if ($code_invalid) {
            $this->addError($attribute, 'Sorry, this code is invalid.');
        }
    }

    ...
}

然后在控制器中,如Yii2指南所示,我使用以下代码捕获此ajax验证:

public function actionValidate() {

    $model = new UserCode(['scenario' => 'register']);

    if (Yii::$app->request->isAjax …

我一直在Yii2中使用模态窗口中的表单,并且我遇到了一个问题,当表单在引导模式窗口内时,标准Yii形式的ajax验证不起作用.

需要明确的是,当字段失去焦点时,会为每个字段触发ajax表单验证.这是标准的Yii表单验证,因此我通过单击所需字段,然后单击该字段来测试模式中的表单.这会触发Yii ajax验证,并应在字段下显示一条红色错误消息,指出"'字段'不能为空."

同样,我的问题是有时ajax验证有效,有时却没有.

我设法将问题陷入与模式代码放置在页面上的位置相关的问题,但是对于我如何影响模式中表单的ajax验证行为没有任何意义.

首先,我将向您展示正常运行的代码.Yii表单验证在模式窗口中的表单上按预期工作.

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\bootstrap\Modal;    
?>
<div class="category-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= Html::button('Create Category', [
        'class' => 'btn btn-success btn-ajax-modal',
        'value' => Url::to('/category/create'),
        'data-target' => '#modal_category',
    ]); ?>

    <?php
    Modal::begin([
        'id' => 'modal_category',
        'header' => '<h4>Category</h4>',
    ]);
    echo '<div class="modal-content"></div>';
    Modal::end();
    ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'title',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>

以上代码中需要注意的事项:

1)这是我的类别/索引视图,因此它有一个创建按钮,引导模态代码,然后是类别的Yii gridview.

2)创建按钮具有btn-ajax-modal …

我希望我只是错过了一些简单的东西,因为我已经看了很久了,但我很难过.

我有一个输入绑定到vuejs的表单.我有一组2个单选按钮用于选择"性别",绑定工作正常.如果我单击任一单选按钮,我可以在vue组件检查器中看到数据更改.

但我正在尝试将单选按钮更改为Bootstrap 4按钮组,并且似乎无法使v模型绑定工作.无论我尝试什么,当我点击按钮组中的任何一个按钮时,我的vue数据中的gender_id都没有得到更新.

表单输入值通过vue组件属性输入,但为简单起见,单选按钮/按钮组的数据如下所示:

export default {
    data() {
        return {
            genders: {
                1: "Men's",
                2: "Women's"
            },
            gender_id: {
                type: Number,
                default: null
            }
        }
    }
}

这是我对单选按钮版本的代码(它正常工作):

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
            <input type="radio"
                class="form-check-input"
                name="gender_id"
                :id="'gender_' + key"
                :value="key"
                v-model.number="gender_id">
            <label class="form-check-label" :for="'gender_' + key">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

这是按钮组版本未正确绑定到vue中的gender_id数据.

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key"> …

谁能帮助我了解如何控制组件根元素 css 类以及可能从调用组件的父级绑定的任何 css 类的顺序？

这是一个小提琴，描述了我注意到的内容（下面的片段示例）： https://jsfiddle.net/cicsolutions/b6rnaw25/

您会注意到，如果您的组件的根元素上有一个类，如果该类是一个字符串，Vue 的类绑定会将该类放置在生成的绑定类列表的开头。这是我所期望的，因为组件设置了基本 css 类，然后您可以在使用组件时通过向组件 html 元素添加类来自定义样式。然后 Vue 将这些类绑定/连接在一起。

在小提琴的下一个示例中，我将展示动态 css 类（即不是静态字符串）的使用。在这些情况下，Vue 将组件的根元素类放置在绑定类列表的末尾。

我正在开发一个希望其他人会使用的组件，所以我想在根元素上设置我的组件类，然后如果有人想要覆盖这些样式，他们可以在组件标签上添加自己的类。

我还需要根元素类是动态的，因此我必须使用数组或对象来处理类绑定。

有谁知道为什么 Vue 将组件根 css 类放在静态类的开头，而将动态类放在结尾？这对我来说似乎很奇怪，但也许这是出于某种我无法理解的原因。

尽管如此，当我需要将组件的根元素类作为动态类时，如何确保组件的根元素类始终位于结果绑定类列表中的第一个？

Vue.directive('bound-class', (el) => {
	const boundClass = el.attributes.class.nodeValue
  const boundClassPrintout = document.createElement('div')
  boundClassPrintout.innerHTML = 'Resulting Bound Class: ' + boundClass
  el.appendChild(boundClassPrintout)
});

// STATIC CSS CLASS -> becomes 1st class in bound class list (expected)
Vue.component('string-test', {
	template: `<div class="string-class" v-bound-class><slot></slot></div>`
});

// DYNAMIC CSS CLASS -> becomes last class in bound class …

根据 Vuex 文档，您可以将有效负载传递给 getter 方法，只要该方法返回一个函数。 https://vuex.vuejs.org/en/getters.html

我不清楚如何格式化返回函数的函数。

就我而言，我想将产品对象传递给 getter 方法，并使用 product.price 数据和 state 中的数据来返回计算出的价格。

这是我目前采用的方法的精简版本：

const store = new Vuex.Store({
    state: {
        product: {
            price: 12.99,
        },
        colors_front: 1,
        colors_back: 0,
    },
    getters: {
        printPrice: (state) => (product) => {
            return (state, product) => {
                var colors_front = state.print_product.colors_front,
                    colors_back = state.print_product.colors_back;

                print_price = parseFloat(product.price) + parseFloat(colors_front * 2.25) + parseFloat(colors_back * 2.25);

                return parseFloat(print_price).toFixed(2);
            }
        },
    }
}

当我尝试在我的组件中访问这个 getter 时，我收到了作为文本字符串的函数代码。

<template>
    <div>{{ printPrice(product) }}</div>
</template>

export default { …