如何在Twig搭配Vue.js的场景下从HTML端设置v-model默认值

最优解决方案：预注入初始表单数据 #

这是最符合Vue设计逻辑的方案，完全不需要操作DOM：

1. 在Twig模板中提前把所有字段的默认值汇总为JSON对象，注入到全局变量中：

{# 遍历你的字段列表生成初始值映射 #}
{% set formInitialValues = {} %}
{% for field in yourFieldList %}
  {% set formInitialValues = formInitialValues|merge({
    (field.id): field.default ?? null
  }) %}
{% endfor %}

{# 注入到全局JS变量 #}
<script>
window.FORM_INITIAL_DATA = {{ formInitialValues|json_encode|raw }};
</script>

2. Vue实例中直接用注入的变量初始化inputs：

data() {
  return {
    // 初始就包含所有字段的键，天然支持响应式
    inputs: window.FORM_INITIAL_DATA || {}
  }
}

3. 原输入框的v-model绑定不需要任何修改，默认值会自动生效。

次选方案：挂载阶段初始化响应式键 #

如果无法提前汇总所有字段的配置，可优化你现有的hack方案，避免手动操作DOM触发事件：

1. 输入框新增两个data-*自定义属性存储字段标识和默认值：

id="{{ id }}_input"
class="{{ id }}_input {{ type }}_input"
label="{{ label ?? null}}{{ meta.required ? " *" : null }}"
name="{{ name }}"
v-model="inputs['{{ id }}']"
data-field-id="{{ id }}"
data-default-value="{{ default ?? '' }}"

2. mounted阶段直接操作响应式数据，不需要修改DOM：

mounted() {
  this.$el.querySelectorAll('[data-field-id]').forEach(el => {
    // Vue2需要用$set保证新增的键是响应式的，Vue3可直接赋值
    this.$set(this.inputs, el.dataset.fieldId, el.dataset.defaultValue)
  })
}

原有方案失效原因说明 #

• :inputs['{{id}}'] = "{{ default }}"属于非法的Vue绑定语法：v-bind(:)是用于给HTML元素属性绑定Vue数据，不能用来给Vue实例的data变量赋值
• Vue2存在响应式限制：直接给对象新增未在data中声明的键，不会触发响应式更新，必须通过this.$set方法新增
• v-model绑定的变量初始为undefined时，会覆盖Twig渲染的input原生value属性，所以你直接读取input.value会拿到空值

内容的提问来源于stack exchange，提问作者Alexey