使用 Vue-JS v-model 进行数据绑定的一种方式

编程问答 2022-05-26

问题描述

我正在使用 Symfony twig 和 Vue.JS。当我第一次坚持表单时一切正常......但是当我想编辑表单时，symfony 控制器正在发送 Vue.JS“v-model”属性无法识别的变量，并且表单字段未填充包含 Symfony 发送的值...

有没有一种方法可以使用 Vue.js v-model 和单向数据绑定，暂时（例如在网页加载期间）......所以当表单正在呈现时，Vue.JS 不会干扰来自 Twig 和 Controller symfony 的数据传输？

感谢您的回复！

PHP Symfony 控制器渲染表单代码如下：

return $this->render('gestionContratInterimaire/modification.html.twig',[
        'controller_name' => 'GestionContratInterimaireController','form' => $form->createView(),'contratInterimaire' => $contratInterimaire
    ]);

这里是 HTML Twig 表单的代码：

<Ajoutcontratinterimaire :coef-agence="{{ contratInterimaire.getCoefficientAgence }}" inline-template>
<div class="container">

        <div>
            {{ form_start(form) }}
                {{form_row(form.idInterimaire)}}
                {{form_row(form.idAgence)}}
                {{form_row(form.Motif_Contrat)}}
                 <div v-if="remplacementIsChecked">
                    {{form_row(form.Personne_Remplacee)}}
                </div>
                {{form_row(form.Coefficient_Agence)}}
                {{form_row(form.Salaire_Horaire_Hors_Coeff)}}
                {{form_row(form.Cout_Horaire_Avec_Coeff)}}
                {{form_row(form.Date_Debut)}}
                {{form_row(form.cancel)}}
                {{form_row(form.submit)}}
            {{ form_end(form) }}

        </div>

这里是 Vue.JS 变量的代码：

->add('Cout_Horaire_Avec_Coeff',NumberType::class,[
                'required' => false,'attr' => [
                    "v-model" => "avecCoefSalaireValue","@blur" => "calculValue()",]

Vue.JS 数据绑定图：

VUE.JS - V-Model Data Binding

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

symfony4twigtwigvue.js