使用复选框导出 VueJS 呈现的 HTML 无法保留选中状态

Posted 2023-02-23

【中文标题】使用复选框导出 VueJS 呈现的 HTML 无法保留选中状态

【英文标题】：Exporting VueJS-rendered HTML with checkbox fails to preserve checked state

【发布时间】：2018-03-10 12:41:44

【问题描述】：

我的组件模板包含以下复选框代码：

<div ref="htmlData">
    <input 
        type="checkbox" 
        class="mycb" 
        :id="uniqID" 
        :disabled="disabled"
        v-model="cbvalue"
    >
</div>

（为简单起见已删除部分）。

我需要使用这个模板创建一个 PDF（在服务器上）。这就是我在代码中所做的：

methods : 
    save () 
        let saveData = 
              'html': this.$refs.htmlData.innerHTML 
            ;
        this.$http.post('/api/save',saveData);
    

但是，保存的 HTML 不包含复选框状态，所以它总是保存一个未选中的复选框。

这里是稍作修改的jsfiddle。

我的问题是：如何在呈现的 HTML 中捕获复选框状态？

我尝试添加 :checked="cbvalue" 道具 - 没有运气

【问题讨论】：

我有 2 个问题要问您，首先为什么要将 HTML 推送到服务器？第二个 VueJS 状态是虚拟 DOM，jsfiddle.net/yMv7y/3533 我修改了一些你不会看到我的名字的输入类型文本。我的建议是将 JSON 数据推送到服务器，使用模板绑定你的数据。

1.我需要将 html 转换为 pdf 并且我不知道可以在客户端执行此操作的好的 JS 库。 2. 我想避免在服务器上进行任何其他解析，因为 HTML 模板可能会有所不同。有些使用复选框，有些不使用，我不想安装完整的服务器端渲染引擎来解决这个小问题。

【参考方案1】：

看起来没有办法绑定输入的checked 属性； Vue 通过属性做所有事情。 （作为参考，属性是内部状态，属性是在 HTML 中显示的内容。）

要让属性反映属性，可以添加一个小指令。

var demo = new Vue(
  el: '#demo',
  data: () => (
    val: false
  ),
  methods: 
    save() 
      console.log(this.$refs.main.innerHTML);
    
  ,
  directives: 
    explicitChecked: 
      update(el) 
        if (el.checked) 
          el.setAttribute('checked', 'checked');
         else 
          el.removeAttribute('checked');
        
      
    
  
)

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
  <button @click="save">save</button>
  <div ref="main">
    <input type="checkbox" v-model="val" v-explicit-checked>
  </div>
</div>